使用 Promise 封装 $.ajax 请求函数。 集中处理 错误返回。 没有太多细节,直接上代码。
代码:
/**
* @Description: 封装 基本请求函数
* @author 蔡昂 (cgh1999520@gmail.com)
* @date 2019/5/5
*/
function f_request() {
// 默认配置信息
let baseConfig = {
BASE_URL: '', // 基本URL 地址
contentType: 'application/json;charset=utf-8'
};
/**
* @Description: 封装内部请求函数
* @date 2019/5/5
*
* @param url: 请求Url 地址,可通过设置 BASE 地址
* @param data: 请求数据
* @param method: 请求方式
*/
function request(url, data, method) {
return new Promise((resolve, reject) => {
$.ajax({
url: baseConfig.BASE_URL + url,
type: method,
data: data,
xhrFields: { // 携带Cookie 信息
withCredentials: true
},
crossDomain: true, // 使用跨域的XMLHttpRequest
contentType: baseConfig.contentType,
dataType: 'json',
success: res => {
// 判断当前code 是否是正确,不正确则返回。
if (!res.state) {
reject(res);
return;
}
// 如果请求成功,则返回数据结果
resolve(res.data);
},
error: err => {
alert('服务器请求失败');
reject(err)
}
})
})
}
/**
* @Description: get请求
* @date 2019/5/5 9:46
*
* @param url: 请求Url 地址,可通过设置 BASE 地址
* @param data: 请求数据
* @param config: 配置参数,可以自己定义BaseConfig 扩展。
*/
function get(url, data = {}, config = {}) {
// 通过对象合并,覆盖本地的baseConfig 配置
Object.assign(baseConfig, config);
return request(url, data, 'GET')
}
/**
* @Description: post 请求
* @date 2019/5/5 9:46
*
* @param url: 请求Url 地址,可通过设置 BASE 地址
* @param data: 请求数据
* @param config: 配置参数,可以自己定义BaseConfig 扩展。
*/
function post(url, data = {}, config = {}) {
// 通过对象合并,覆盖本地的baseConfig 配置
Object.assign(baseConfig, config);
return request(url, data, 'POST')
}
// 通过闭包, 只返回 get / post 请求函数
return {
get,
post
}
}
请求代码使用:
// GET 请求
f_request().get('/test/api').then(res => {
console.error(res, '请求成功')
},err => {
console.error(err, '请求错误')
});
// POST 请求
f_request().post('/test/api', {
id: '123'
}).then(res => {
console.error(res, '请求成功')
}).catch(err => {
console.error(err, '请求错误')
});
GIT 还有其它一些公共的 函数封装,和日常使用的类库。 github.com/cgh1999520/…