告别回调，拥抱async await

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

之前使用jquery中ajax，请求的结果需要写在回调函数里面，后面接触到了axios/fetch，使用了es6中Promise进行封装，这种链式结构调用，看起来比之前直观，可是还是没有解决回调的问题，甚至axios/fetch相比原生ajax以及jquery中的ajax来说，不支持同步请求，这就导致：当一个请求需要的参数是依赖上一次请求返回的结果时，只能把第二次请求也写在第一次请求的回调里面，当内容过多时，就会被嵌套绕进去，写法上很不优雅。

es7中的async await是一个不错的解决办法，配合try catch，代码简洁而优雅，跟回调说拜拜。

对jquery中ajax的进一步封装：

1.接口配置(dev: 开发，test：测试，prd：生产)

const env = 'dev' // 使用哪个接口
function useConfig() {
let config = {
dev: {
ApiHost: 'http://10.0.0.0:3030',
otherHost: '', // 设置多个接口
},
test: {
ApiHost: 'http://10.0.0.0:8080',
otherHost: '', // 设置多个接口
},
prd: {
ApiHost: 'http://10.0.0.0:9090',
otherHost: '', // 设置多个接口
}
}[env]
return config
}

2.使用Promise封装ajax

let apiMap = {
login: ['POST', '/api/login'],
getGoodList: ['GET', '/api/getGoodList']
}
let config = useConfig()
let tradeApi = {}
for (let key in apiMap) {
let api = apiMap[key]
tradeApi[key] = function(params) {
let options = {
type: api[0],
url: `${config.ApiHost}${api[1]}`,
data: params
}
return DoRequest(options)
}
}
let ApiHost = 'http://10.0.0.0:3000'
function DoRequest(options) {
return new Promise((resolve, reject) => {
$.ajax({
type: options.type,
url: options.url,
data: Object.assign({}, options.data),
crossDomain: true,
dataType: 'json',
success: (res) => {
resolve(res)
},
error: (xhr, textStatus, errorThrown) => {
reject(xhr, textStatus, errorThrown)
}
})
})
}

3.调用

tradeApi.getGoodList({pageNum: 1, pageSize: 10}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})

4.使用async await改写

async function getList() {
try {
let data = await tradeApi.getGoodList({pageNum: 1, pageSize: 10})
console.log(data)
} catch(err) {
console.log(err)
}
}