现在项目大多数采用前后端分离的方式来实现,特别是随着React、Vue的流行使用越来越广泛。第一次接触React时选用了蚂蚁金服dva+antd来搭建前端开发框架,dva自带的fetch方法不能满足项目需求,所以自己采用axios封装了一个访问网络数据工具类。
等后续有时间会补上react + dva.js + axios +antd 搭建的前端开发框架的代码,现只贴出axios请求工具类request.js。
/* global window */
import axios from 'axios';
//let apiRoot = document.cookie.apiroot ? document.cookie.apiroot : "";
//let ssosessionid = document.cookie.ssosessionid;
axios.interceptors.response.use(response => {
//axios请求拿到结果会根据情况加入对应的状态码,成功了会加:statusCode=200,success: true
//console.log('axios请求response.data: ', response.data);
var returnMessage;
if(response.data.code == 401) {
returnMessage = '未授权,请重新登录(401)';
console.error(returnMessage);
alert(returnMessage);
window.location.href = '/login';
return Promise.reject(response);
} else if(response.data.code == 403) {
returnMessage = '无权限,拒绝访问(403)';
console.error(returnMessage);
alert(returnMessage);
return Promise.reject(response);
}else if(response.data.resultFlag == 'SUCCESS' || response.data.statusCode == 200 ) {
// returnMessage = 'axios请求成功!'
// console.log(returnMessage);
return response;
}
return response;
}, err => {
console.log('axios请求error: ', err);
if (err && err.response) {
switch (err.response.status) {
case 400: err.message = '请求错误(400)' ; break;
case 401: err.message = '未授权,请重新登录(401)'; break;
case 403: err.message = '无权限,拒绝访问(403)'; break;
case 404: err.message = '请求出错(404)'; break;
case 408: err.message = '请求超时(408)'; break;
case 500: err.message = '服务器错误(500)'; break;
case 501: err.message = '服务未实现(501)'; break;
case 502: err.message = '网络错误(502)'; break;
case 503: err.message = '服务不可用(503)'; break;
case 504: err.message = '网络超时(504)'; break;
case 505: err.message = 'HTTP版本不受支持(505)'; break;
default: err.message = `连接出错(${err.response.status})!`;
}
}else{
err.message = '连接服务器失败!'
}
message.error(err.message);
return Promise.reject(err);
});
export default axios;
const fetch = (options) => {
let {
method = 'post',
data,
url,
config,
} = options;
switch (method.toLowerCase()) {
case 'get':
return axios.get(url, {
params: data,
});
case 'delete':
return axios.delete(url, {
data,
});
case 'post':
return axios.post(url, data, config);
case 'put':
return axios.put(url, data, config);
case 'patch':
return axios.patch(url, data, config);
default:
return axios(options);
}
}
export function request(options) {
if (options && options.url) {
options.url += "?ssoSessionId=a8280fac-b7fe-43c7-9149-78701b2c0cb0++"; //只在react请求生效,node环境该累加的ssoSessionId不会生效,会被覆盖掉
}
//console.info("---------->> request options :", options);
return fetch(options).then((response) => {
const {statusText, status} = response;
let {data} = response;
if (data instanceof Array) {
data = {
list: data,
};
}
if (data instanceof Blob) {
data = {
obj: data,
};
}
return Promise.resolve({
success: true,
message: statusText,
statusCode: status,
...data,
});
}).catch((error) => {
//axios返回错误信息位于:error.response.data
const {response} = error;
if (response && response.data && response.data.errorMessage) {
console.log('---equest Error.response--> ', error.response);
const errorMsg = response.data.errorMessage;
if (errorMsg.indexOf("未登录") > -1 ){
alert("请求被拒绝,该请求必须登录状态才能发起!");
} else if (errorMsg.indexOf("没有足够的权限") > -1){
alert("请求被拒绝,没有足够的权限!");
}
}
let msg;
let statusCode;
if (response && response instanceof Object) {
const {data, statusText} = response;
statusCode = response.status;
msg = data.message || statusText;
} else {
statusCode = 600;
msg = error.message || 'Network Error';
}
/* eslint-disable */
return Promise.reject({success: false, statusCode, message: msg})
})
}
export const doRequest = (url, method = "post", params, callbackSuccess, callbackFail) => {
return request({
url: url,
method: method,
data: params,
}).then(function (result) {
if (callbackSuccess) {
callbackSuccess(result);
}
}, function (error) {
if (callbackFail) {
callbackFail(error);
}
});
}
使用起来特别方便,新建一个文件名为service.js,在js文件中直接引入即可。
import { request } from 'utils/request';
export async function query(params) {
var reqBody = {
url: "/xxxx",
method: 'post',
config:{headers: {'Content-Type': 'application/x-www-form-urlencoded'}},
data: {
...params
}
};
console.log("xxxxxjsonxxxxxxx", JSON.stringify(reqBody));
return request(reqBody);
}
上图代码中config可以通过向 axios
传递相关配置来创建请求
axios参考链接:http://www.axios-js.com/zh-cn/docs/