之前使用jquery中ajax，请求的结果需要写在回调函数里面，后面接触到了axios/fetch，使用了es6中Promise进行封装，这种链式结构调用，看起来比之前直观，可是还是没有解决需要把结果写在回调函数里面，甚至axios/fetch相比原生ajax以及jquery中的ajax来说，不支持同步请求，这就导致：当一个请求需要的参数是依赖上一次请求返回的结果时，只能把第二次请求也写在第一次请求的回调里面，当内容过多时，就会被嵌套绕进去，写法上很不优雅。
es7中的async await正是解决这一尴尬问题的方法，配合try catch，代码简洁而优雅，跟回调说拜拜。
首先，如果是 jquery的项目：
1.使用Promise封装ajax
let ApiHost = ‘http://10.0.0.0:3000‘
function DoRequest(url, data=null, type=‘get‘) {
return new Promise((resolve, reject) => {
$.ajax({
type: type,
url: `${ApiHost }${url}?_rank=${new Date*1}`,
data: Object.assign({}, data),
crossDomain: true,
dataType: ‘json‘,
success: (res) => {
resolve(res)
},
error: (xhr, textStatus, errorThrown) => {
reject(xhr, textStatus, errorThrown)
}
})
})
}
2.调用
DoRequest(url, { id: 1 }).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
3.使用async await改写
async function getList() {
try {
let data = await DoRequest(url, { id: 1 })
console.log(data)
} catch(err) {
console.log(err)
}
}
原文地址：https://www.cnblogs.com/Yicoding/p/10114585.html