1、背景
最近在项目开发中ajax请求是真的用的太多太多了
为了简化一些请求的过程，我看了和学习axios官网的文档，并进行了配置基于个人vue项目的简易配置
```
//导入必要的一些包或者模块(也可能是库)
import axios from 'axios';
import qs from 'qs';
import Cookies from "js-cookie";
import {Toast} from 'vant';
import router from '@/router'
```
```
/*判断token是否存在*/
/设置token/
let cancelToken=axios.CancelToken; let source=cancelToken.source()
/设置头部/
const http=axios.create({ baseURL:'/',
timeout:4999,
headers:{ "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" },
responseType:'json',
withCredentials:true,
proxy:{ //代理
host:'127.0.0.1',//端口号
port: 9999,
auth:{
},
},
maxContentLength:9999,//响应最大的尺寸 })
//在超时前，所有请求都会等待 2.9 秒
http.defaults.timeout=2999
/响应服务器端的/
http.interceptors.request.use(config=>{
if(
config.method.toLocaleLowerCase()==='POST'||
config.method.toLocaleLowerCase()==='PUT'||
config.method.toLocaleLowerCase()==='DELETE'||
config.method.toLocaleUpperCase()==='post'||
config.method.toLocaleUpperCase()==='put'||
config.method.toLocaleUpperCase()==='delete')
{
config.data=config.data
}
if(Cookies.get('Token')){
config.headers['token'] = Cookies.get('Token')
}
return config
},error => {
Toast.fail({
message:error,
duration:3*1000
})
return Promise.reject(error)
})
/发送给服务器端/
http.interceptors.response.use(response=>{
const res = response.data
Toast.loading({
message:'loading',
duration:0,
})
if(res.data && !res.success){
Toast.fail({
message:res.data.errors,
duration:3*1000
})
return Promise.reject('error')
} return res
},error => {
/判断token是否过期/
let lifeTime=JSON.parse(Cookies.get('TokenTime'))
let newTime=new Date().getTime()
if(newTime>lifeTime){
Toast({
type:'fail',
message:'登录信息已过期,请重新登录',
duration:3*1000
})
//删除过期的token和时间
Cookies.remove('Token')
Cookies.remove('TokenTime')
router.push({
path:'/login'
})
}
/各类错误/
else{ /状态码 404 500/
if(error && error.response){
switch (error.response.status) {
case 500:
Toast({
type:'fail',
message:'服务器正在维护中，请稍后访问',
duration:3*1000
})
router.push({
path:'/error/500'
})
break
case 404:
Toast({
type:'fail',
message:'当前资源未找到',
duration:3*1000
})
router.push({
path:'/error/404'
})
break
case 401:
Toast({
type:'fail',
message:'访问超时，请重新登录',
duration:3*1000
})
router.push({
path:'/login'
})
break
default:
Toast({
type:'fail',
message:`连接失败${error.response.status}，请联系网站管理员`,
duration:3*1000
})
}
}
else{
Toast({
type:'fail',
message:'远程服务器连接失败',
duration:3*1000
})
}
} return Promise.reject(error)
})
export default http ```
相关参数都在上面写着了，如果有不明白，可以留言，谢谢，如果有修改的话，会在第一时间修改掉
