一般现在请求接口都会使用axios,方便而且比较简洁,下面总结了一套比较通用的请求方法以及报错机制
代码如下:
处理一遍数据结构的then方法可以根据业务情况自行调整
import Axios from 'axios';
const axios = Axios.create({
timeout: 200000
})
function ajax(method, url, params) {
function r() {
if (method.toLowerCase() === 'get') {
return axios.get(url, {
params,
headers: {
'token': ''
},
})
} else if (method.toLowerCase() === 'post') {
return axios.post(url, params, {
headers: {
'token': ''
}
})
}
}
return r().then(res => { /
const data = res.data
// 先处理一遍数据结构
if (
typeof data !== 'object' ||
typeof data.data === 'undefined' ||
typeof data.code === 'undefined' ||
typeof data.msg === 'undefined'
) {
throw `服务端返回数据格式不正确`;
} else {
return data;
}
}).then(data => {
// 再处理code错误码
if (data.code !== 0) {
return Promise.reject(data); // 这个reject会返回给下面的catch
} else if (data.code === 0) {
return data.data;
}
}).catch(e => {
errorHandler(e);
throw e; // throw e返回错误给调用的局部catch,去掉的话会返回给局部then
});
}
// 统一的错误报告
function errorHandler(e) {
let errMsg = '请求出错!'
let onClose = () => {}
let duration = 2000
if (typeof e === 'string') {
errMsg = e
} else if (e.response) {
const { status } = e.response
if (!(200 < status && status < 300 || status === 304)) {
errMsg = '服务器请求超时,请稍后重试';
}
} else if (e.code === 200010005) { // code根据业务修改
errMsg = '用户未登录';
duration = 800;
onClose = () => {
// 跳转登陆
}
} else {
errMsg = e.msg;
}
// element UI的组件弹框
Message({
type: 'warning',
message: errMsg,
duration: duration,
onClose: onClose
});
}
export const getData = (url = '', params = {}) => {
return ajax('get', url, params)
}
export const postData = (url = '', params = {}) => {
return ajax('post', url, params)
}