类似ajax封装函数,JS 封装一个async式的AJAX函数
其实也没什么，就是用上ES7的异步函数，让ajax使用起来更方便。这个方便主要是体现在：无回调 & 无then链式 & 轻松收集异常。
大致分3步：
1、封装API类(这步不用异步函数)
这一步一般会单独建立一个文件！
// 定义一个API类，专门用于获取各类数据
class Api {
// 有的ajax请求是会做鉴权的，constructor里放这些鉴权参数
constructor (token) {
this.token =token;
}
// opt 里存放特定请求需要的参数，如url等
getUser (opt) {
return new Promise((resolve, reject) => {
$.ajax({
headers:{
token:this.token
},
url:opt.url,
data:opt.data,
success:function(data){
resolve(data);
},
error:function(error,status){
reject(error);
}
})
})
}
//其他API定义区
...
}
2、进一步封装特定API(使用异步函数)
这一步一般是在特定的需要调用某API时用到
// const api = new Api(token)一般会提前执行，比如在vue组件script的import和export default之间执行，这也是为了避免该语句在每个具体api里都执行一次。
// 在vue中，可以将该函数放在methods里
async function loadUserData (opt) {
try{
const user = await api.getUser(opt)；
// 根据user状态执行业务逻辑
...
}catch(e){
// 请求异常的处理逻辑
}
}
第三步：使用API
// 在vue中，可以将该代码放在mounted里
loadUserData(opt)
经过这三步，基本就实现了无回调，无then链式调用和轻松处理错误这几个比较烦人的问题啦！
参考
其实也没什么，就是用上ES7的异步函数，让ajax使用起来更方便。这个方便主要是体现在：无回调 & 无then链式 & 轻松收集异常。 大致分3步： 1、封装API类(这步不用异步函数) 这一步一般会单独建立一个文件！ // 定义一个API类，专门用于获取各类数据 class Api { // 有的ajax请求是会做鉴权的，constructor里放这些鉴权参数 constructor (token) { this.token =token; } // opt 里存放特定请求需要的参数，如url等 getUser (opt) { return new Promise((resolve, reject) => { $.ajax({ headers:{ token:this.token }, url:opt.url, data:opt.data, success:function(data){ resolve(data); }, error:function(error,status){ reject(error); } }) }) } //其他API定义区 ... } 2、进一步封装特定API(使用异步函数) 这一步一般是在特定的需要调用某API时用到 // const api = new Api(token)一般会提前执行，比如在vue组件script的import和export default之间执行，这也是为了避免该语句在每个具体api里都执行一次。 // 在vue中，可以将该函数放在methods里 async function loadUserData (opt) { try{ const user = await api.getUser(opt)； // 根据user状态执行业务逻辑 ... }catch(e){ // 请求异常的处理逻辑 } } 第三步：使用API // 在vue中，可以将该代码放在mounted里 loadUserData(opt) 经过这三步，基本就实现了无回调，无then链式调用和轻松处理错误这几个比较烦人的问题啦！ 参考