JavaScript - request封装
request封装——微信小程序使用async,await
ES5
参考代码
var request = function(param){
var _this = this;
$.ajax({
type : param.method || 'get',
url : param.url || '',
dataType : param.type || 'json',
data : param.data || '',
success : function(res){
// 请求成功
if(0 === res.status){
typeof param.success === 'function' && param.success(res.data, res.msg);
}
// 没有登录状态,需要强制登录
else if(10 === res.status){
_this.doLogin();
}
// 请求数据错误
else if(1 === res.status){
typeof param.error === 'function' && param.error(res.msg);
}
},
error : function(err){
typeof param.error === 'function' && param.error(err.statusText);
}
});
}
ES6——promise
这里以微信小程序开发为例,jquery同理
// request.js
export const request = (params) => {
const baseUrl = 'https://api.com';
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result);
},
fail: (err) => {
reject(err);
}
})
})
}
考虑到加载图标
// 同时发送异步请求的次数
let ajaxTimes = 0;
export const request = (params) => {
ajaxTimes ++;
// 加载图标
wx.showLoading({
title: '加载中',
mask: true
});
const baseUrl = 'https://api.com';
return new Promise((resolve, reject) => {
wx.request({
...params,
url: baseUrl + params.url,
success: (result) => {
resolve(result.data.message);
},
fail: (err) => {
reject(err);
},
complete: () => {
ajaxTimes --;
if(ajaxTimes === 0) {
wx.hideLoading();
}
}
})
})
}
使用前需要引入request.js文件(更换为自己的文件目录)
import { request } from "../../request.js";
使用promise的then方法获取数据
getData() {
request({url: '/dataUrl'})
.then((result) => {
……
},(err) => {
……
})
}
ES7——async,await
注意:使用async,await必须建立在promise的基础上,所以还要用到上面的ES6——promise所述内容
微信小程序支持ES7
1.下载runtime.js文件到自己的项目文件夹
地址:runtime.js github
2.在所有用到async,await的文件都要引入
import regeneratorRuntime from "../../lib/runtime/runtime.js";
使用async,await
async getData() {
const result = await request({url: '/dataUrl'});
……
}
完结~