在自己搭建VUE项目的时候,网络请求用的是axios,考虑到需要设置默认请求头,请求超时,响应等,于是自己封装axios。
废话不多说,直接上。
/*
* @Description: axios封装方法
* @Author:linn
* @LastEditors: Please set LastEditors
* @Date: 2019-04-24 09:54:26
* @LastEditTime: 2019-04-30 11:36:41
*/
import { Toast } from "vant";
import axios from "axios";
import qs from "qs";
import router from "../router";
import store from "../store/store";
const Platform = "wzws2";
let index = 0;
// const cookie = store.state.cookie;
// console.log(store)
// 创建axios实例
// const service = axios.create({
// timeout: 30000 // 请求超时时间
// })
let BACE_URL =
process.env.NODE_ENV == "development"
? "http://www.yizhihudie.com/"
: "http://www.yizhihudie.com/";
var service = axios.create();
// service.defaults.timeout = 5000;
service.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded";
service.defaults.baseURL = BACE_URL;
// 添加request拦截器
service.interceptors.request.use(
config => {
// config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config;
},
error => {
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
if (
response.data.info.errcode == 1001 &&
router.currentRoute.path != "/login" &&
response.config.url != "www.yizhihudie.com/wesite/wzws2/getbubble" &&
response.config.url != "www.yizhihudie.com/wesite/wzws2/GetUserState" &&
response.config.url != "www.yizhihudie.com/wesite/wzws2/GetMyStatus"
) {
console.log(response);
Toast({
message: "请重新登录",
duration: 3000,
forbidClick: true
});
// 清除token
localStorage.removeItem("cookie");
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: "/login",
query: {
redirect: router.currentRoute.fullPath
}
});
console.log(
router.currentRoute.fullPath,
"router.currentRoute.fullPath"
);
localStorage.setItem("beforeLoginUrl", router.currentRoute.fullPath);
}, 3000);
}
return Promise.resolve(response);
} else {
return Promise.resolve(response);
// return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: "/login",
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: "登录过期,请重新登录",
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem("token");
store.commit("loginSuccess", null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: "/login",
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: "网络请求不存在",
duration: 1500,
forbidClick: true
});
break;
// 其他错误,直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
);
export function get(url, params = {}) {
// params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
if (url != "http://www.yizhihudie.com/wesite/user/login") {
// params["cookie"] = '';
params["platform"] = Platform;
// console.log(cookie,"cookie")
// console.log(params, "params");
return service({
url: url,
method: "get",
headers: {},
params
});
} else {
return service({
url: url,
method: "get",
headers: {},
params
});
}
}
// export default function post(url, params) {
// return axios.post(url, qs.stringify(params))
// .then((response) => {
// console.log('response', response);
// return response;
// })
// .catch((error) => {
// console.log('error', error);
// return error;
// });
// }
//封装post请求
export function post(url, data = {}) {
//默认配置
// data["cookie"] = cookie;
// data["platform"] = Platform;
let sendObject = {
url: url,
method: "post",
headers: {},
data: qs.stringify(data)
};
// sendObject.data = JSON.stringify(data);
return service(sendObject);
}
// //封装put方法 (resfulAPI常用)
// export function put(url,data = {}){
// return service({
// url: url,
// method: 'put',
// headers: {
// 'Content-Type': 'application/json',//设置请求头请求格式为JSON
// // 'access_token': this.token //设置token 其中K名要和后端协调好
// },
// data:qs.stringify(data)
// })
// }
// //删除方法(resfulAPI常用)
// export function deletes(url){
// return service({
// url: url,
// method: 'delete',
// headers: {}
// })
// }
//不要忘记export
export { service };
最后将这个axios.js文件引入main.js中,并将引入的axios挂载到Vue实例上就ok了。
完美!如有不对的地方还请各位大佬指点,万分感谢。