动态Axios的配置步骤详解

2023-09-17 23:52:06 162

前言

以前写Vue项目的时候都是使用vue-resource做为项目ajax库，在11月份的某一天尤大微博的更新表示ajax的库应该是通用的，放弃了对vue-resource的技术支持，推荐使用axios。

推荐使用Vue-cli工具来创建和管理项目，就算刚开始不熟悉，用着用着便可知晓其中的奥妙。前一段时间官方所推荐的数据请求插件还是Vue-resource，但现在已经变了，变成了Axios,不用知道为什么变了，反正这个用起来比那个好一些，用就是了，下面是一些封装axios请求的一些经验，不对之处，还望多多指教！

方法如下

一、创建文件，Vue项目初始化之后，在src目录下再创建一个util工具文件夹，一般就是用来存放一些封装的函数方法，现在让我们在util文件目录下创建一个http.js文件，封装axios方法。

二、直接上代码（常规版），代码中有详细的注释

importaxiosfrom'axios'//引用axios
import{Promise}from'es6-promise'//引入Promise
//axios配置
axios.defaults.timeout=5000;//设置超时时间
axios.defaults.baseURL='http://localhost:4000/api/v1/';//这是调用数据接口
//httprequest拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
config=>{
consttoken=sessionStorage.getItem("token");//获取存储在本地的token
config.data=JSON.stringify(config.data);
config.headers={
'Content-Type':'application/json'//设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
};
if(token){
config.headers.Authorization="Token"+token;//携带权限参数
}
returnconfig;
},
err=>{
returnPromise.reject(err);
}
);


//httpresponse拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
response=>{
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的
if(response.status==401){
router.push({//push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数
path:'/login'
})
}
returnresponse;
},
error=>{
returnPromise.reject(error.response.data)
});

exportdefaultaxios;

/**
*fetch请求方法
*@paramurl
*@paramparams
*@returns{Promise}
*/
exportfunctionfetch(url,params={}){
returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params
})
.then(response=>{
resolve(response.data);
})
.catch(err=>{
reject(err)
})
})
}

/**
*post请求方法
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpost(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.post(url,data)
.then(response=>{
resolve(response.data);
},err=>{
reject(err);
})
})
}

/**
*patch方法封装
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpatch(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.patch(url,data)
.then(response=>{
resolve(response.data);
},err=>{
reject(err);
})
})
}

/**
*put方法封装
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionput(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.put(url,data)
.then(response=>{
resolve(response.data);
},err=>{
reject(err);
})
})
}

三、（动态版），axios的拦截器不是必要的，不是每个项目都需要，而且headers里面的Content-Type和Authorization不止一种，这时就需要使用另一种方法。

util/http.js

importaxiosfrom'axios'//引用axios
import{Promise}from'es6-promise'//引入Promise
//axios配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。
//^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成fetch("地址",{},{"这里写头部的内容"})记住没数据用一个空对象占位置
/**
*fetch请求方法
*@paramurl
*@paramparams
*@returns{Promise}
*/
exportfunctionfetch(url,params={},headers={
'Content-Type':'application/json',//设置跨域头部
"Authorization":'JWT'+sessionStorage.getItem("authToken")
}){

returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params,
headers:headers
})
.then(response=>{
resolve(response.data);
})
.catch(err=>{
reject(err.response)
})
})
}

/**
*post请求方法
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpost(url,data={},config={
"headers":{
'Content-Type':'application/json',//设置跨域头部
"Authorization":'JWT'+sessionStorage.getItem("authToken")
}
}){
returnnewPromise((resolve,reject)=>{
axios.post(url,data,config)
.then(response=>{
resolve(response.data);
},err=>{
reject(err.response);
})
})
}

/**
*patch方法封装
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpatch(url,data={},config={
"headers":{
'Content-Type':'application/json',//设置跨域头部
"Authorization":'JWT'+sessionStorage.getItem("authToken")
}
}){
returnnewPromise((resolve,reject)=>{
axios.patch(url,data,config)
.then(response=>{
resolve(response.data);
},err=>{
reject(err.response);
})
})
}

/**
*put方法封装
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionput(url,data={},config={
"headers":{
'Content-Type':'application/json',//设置跨域头部
"Authorization":'JWT'+sessionStorage.getItem("authToken")
}
}){
returnnewPromise((resolve,reject)=>{
axios.put(url,data,config)
.then(response=>{
resolve(response.data);
},err=>{
reject(err.response);
})
})
}

App.vue(这是在src目录下的程序入口文件)





//这里我使用的是scss
@import'~@/style/style'

总结

常见问题

在使用动态版时，为什么称为动态呢，是因为访问地址和请求地址是同一个地址可端口号，例如我通过http://www.cmgos.com(默认端口80)访问项目，那么我的baseURL会自动的变为http:www.cmgos.com:80/api/，这么做的原因是当某一天项目迁移或者http改为https时，不用你再去更改请求地址，程序自动就完成了
数据请求地址配置不正确？如果你配置了baseURL，那么你封装的函数在使用时仅需传入基于baseURL的请求地址，例如传入login/那么请求地址会自动变为http:www.cmgos.com:80/api/login/，若未配置，那么可以直接传入整个请求地址

注意事项

在使用动态版时，由于没有使用拦截器，所以下面封装的函数在返回错误的时候需要写成err.response.data来获取返回的数据，但我写的是err.response，因为这样可以拿到(status)状态码等信息，若不需要判断返回的状态码，则改为err.response.data便可

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

动态Axios的配置步骤详解

热门推荐

随机推荐