介绍 cnpm install axios ——save-dev;,//,安装axios
cnpm install qs ——save-dev;,//,安装qs模块,用来序列化柱类型的数据,否则后端无法接收到数据 模块引入
import axios 得到& # 39;axios& # 39;,//引入axios
import qs 得到& # 39;qs # 39;,//引入qs,用来序列化柱类型的数据,否则后端无法接收到数据//,设置后请求头
axios.defaults.headers.post[& # 39;内容类型# 39;],=,& # 39;应用程序/x-www-form-urlencoded; charset=utf - 8 # 39;;
时间=axios.defaults.withCredentials 假;//在跨域请求时,不会携带用户凭证;返回的,response 里也会忽略,饼干//创建axios实例,请求超时时间为300秒
const instance =, axios.create ({
300000年,超时:
});//请求和响应拦截可以根据实际项目需求进行编写//,请求发起前拦截
instance.interceptors.request.use((配置),=祝辞,{//这里可以对接口请求头进行操作,如:config.headers [& # 39; X-Token& # 39;],=,令牌
,console.log(“请求拦截“,配置);
,return 配置;
},(错误),=祝辞,{
,//Do something with request 错误
,return Promise.reject(错误)
}）//,响应拦截(请求返回后拦截)
instance.interceptors.response.use (response =祝辞,{
,console.log(“响应拦截“,响应);
,return 响应;
},error =祝辞,{
,console.log(& # 39;抓住# 39;,,错误)
,return Promise.reject(错误)
}）//按照请求类型对axios进行封装
const api={
,得到(url,数据){
return instance.get (url,{参数:数据})
},
,文章(url,数据){
return instance.post (url, qs.stringify(数据)
},大敌;
}
export {api} import axios 得到& # 39;axios& # 39;,//引入axios
import qs 得到& # 39;qs # 39;,//引入qs,用来序列化柱类型的数据,否则后端无法接收到数据//,设置后请求头
axios.defaults.headers.post[& # 39;内容类型# 39;],=,& # 39;应用程序/x-www-form-urlencoded; charset=utf - 8 # 39;;
时间=axios.defaults.withCredentials 假;//在跨域请求时,不会携带用户凭证;返回的,response 里也会忽略,饼干//创建axios实例,请求超时时间为300秒,因为项目中有多个域名,所以对应的也要创建多个axios实例
const instanceA =, axios.create ({
300000年,超时:
});
const instanceB =, axios.create ({
300000年,超时:
});//如果项目为单一域名,这里可以不用进行配置,当项目接口有多个域名时,要对axios实例基础路径进行配置,否则在项目生产环境中无法进行区别调用
if (process.env.NODE_ENV ==, & # 39;生产# 39;),{=,instanceA.defaults.baseURL & # 39; https://www.production_a.com& # 39;;=,instanceB.defaults.baseURL & # 39; https://www.production_b.com& # 39;;
}//请求和响应拦截可以根据实际项目需求进行编写//,请求发起前拦截
instanceA.interceptors.request.use((配置),=祝辞,{//这里可以对接口请求头进行操作,如:config.headers [& # 39; X-Token& # 39;],=,令牌
,console.log(“请求拦截“,配置);
,return 配置;
},(错误),=祝辞,{
,//Do something with request 错误
,return Promise.reject(错误)
}）
instanceB.interceptors.request.use((配置),=祝辞,{
,console.log(“请求拦截“,配置);
,return 配置;
},(错误),=祝辞,{
,//Do something with request 错误
,return Promise.reject(错误)
}）//,响应拦截(请求返回后拦截)
instanceA.interceptors.response.use (response =祝辞,{
,console.log(“响应拦截“,响应);
,return 响应;
},error =祝辞,{
,console.log(& # 39;抓住# 39;,,错误)
,return Promise.reject(错误)
}）
instanceB.interceptors.response.use (response =祝辞,{
,console.log(“响应拦截“,响应);
,return 响应;
},error =祝辞,{
,console.log(& # 39;抓住# 39;,,错误)
,return Promise.reject(错误)
}）//按照请求类型对axios进行封装
const api={
,得到(url,数据){
return instanceA.get (url,{参数:数据})
},
,文章(url,数据){
return instanceA.post (url, qs.stringify(数据)
},
,doGet (url,数据){
return instanceB.get (url,{参数:数据})
},
,doPost (url,数据){
return instanceB.post (url, qs.stringify(数据)
}大敌;
}
export {api}
本篇文章为大家展示了利用vue怎么对axios进行封装,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
安装
模块引入
在src目录下创建一个服务目录,用于存放接口封装的相关文件。然后在服务目录中创建服务。js,用于axios, qs模块的引入,并在此文件中对axios进行封装。代码如下(接口域名只有一个的情况):
上述代码是接口域名只有一个的情况(多数情况),当接口域名有多个的时候(少数情况),我们需要对之前的封装进行改造,代码如下:
