详解vue中axios的使用与封装
分享下我自己的axios封装
axios是个很好用的插件，都是一些params对象，所以很方便做一些统一处理
当然首先是npm安装axios很简单$npminstallaxios--save
在src下新建文件夹service/index.js
接着上代码
importaxiosfrom'axios';
import{Toast}from'mint-ui';//我用的mint的框架来弹出我的错误返回大家可以用别的提示
importrouterfrom'../router'
//默认超时设置
axios.defaults.timeout=50000;
//相对路径设置
axios.defaults.baseURL='';
//httprequest拦截器
axios.interceptors.request.use(
config=>{
//获取token
consttoken=localStorage.getItem('cc_token');
//设置参数格式
if(!config.headers['Content-Type']){
config.headers={
'Content-Type':'application/json',
};
}
//添加token到headers
if(token){
config.headers.token=token
}
//鉴权参数设置
if(config.method==='get'){
//get请求下参数在params中，其他请求在data中
config.params=config.params||{};
letjson=JSON.parse(JSON.stringify(config.params));
//一些参数处理
}else{
config.data=config.data||{};
//一些参数处理
}
returnconfig;
},
err=>{
returnPromise.reject(err);
}
);
以上请求之前的一些处理就完成了
下面是获得返回的一些处理
//httpresponse拦截器
axios.interceptors.response.use(
response=>{
//一些统一code的返回处理
if(response.data.code===501){
//登录验证
//做了个示例跳转项目中登录，并记录下相对路径
router.push({
name:'login',//从哪个页面跳转
query:{
retUrl:window.location.href.split('#')[1]||'',
is_new_user_url:1
}
})
}
returnresponse;
},
error=>{
returnPromise.reject(error)
}
);
接着把所有请求类型都做下简单封装
/**
*封装get方法
*@paramurl
*@paramparams
*@returns{Promise}
*/
exportfunctionfetch(url,params={}){
returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params
})
.then(response=>{
if(response.data.code===200){
//返回成功处理这里传的啥后续调用的时候res就是啥
resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了
}else{
//错误处理
Toast(response.data.msg)
}
})
.catch(err=>{
reject(err);
letmessage='请求失败！请检查网络';
//错误返回
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
/**
*封装post请求
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpost(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.post(url,data)
.then(response=>{
if(response.data.code===200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err=>{
reject(err);
letmessage='请求失败！请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
/**
*封装patch请求
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionpatch(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.patch(url,data)
.then(response=>{
if(response.data.code===200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err=>{
reject(err);
letmessage='请求失败！请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
/**
*封装put请求
*@paramurl
*@paramdata
*@returns{Promise}
*/
exportfunctionput(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.put(url,data)
.then(response=>{
if(response.data.code===200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err=>{
reject(err);
letmessage='请求失败！请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
exportfunctiondel(url,data={}){
returnnewPromise((resolve,reject)=>{
axios.delete(url,data)
.then(response=>{
if(response.data.code===200){
resolve(response.data.data);
}else{
Toast(response.data.msg)
}
},err=>{
reject(err);
letmessage='请求失败！请检查网络';
if(err.response)message=err.response.data.message;
Toast(message)
})
})
}
好了主要的文件编辑好然后在service中新建api.js文件并引入对应组件方法
importVuefrom'vue';
import{post,fetch,patch,put,del,upload,ret2}from'./index'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.prototype.$del=del;
接着就可以开始写各个API方法了
//也可以不需要
const_baseUrl=process.env.API_URL;//这里我在项目配置文件里面设置了相对路径
//登录方法
constloginURL=`${_baseUrl}api/admin/login`;
exportconstloginApi=function(json){
returnVue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
};
//修改账号信息RESTful
consteditAdminUrl=`${_baseUrl}api/admin/user/info`;
exportconsteditAdminListApi=function(id,json){
returnVue.prototype.$put(`${editAdminUrl}/${id}`,json)
};
//等等...
最后是使用，非常简单方便，在vue文件中引入并使用
import{loginApi,editAdminListApi}from"../../service/api";
exportdefault{
methods：{
//登录
login(){
letjson={
userName:'xx',
password:'xx'
}
loginApi().then(res=>{
console.log(res)
})
},
//RESTful修改信息
editAdminList(){
letid=1;
letjson={name:11};
editAdminListApi(id,json).then(res=>{
console.log(res)
})
}
}
}
使用方便简洁。
以上所述是小编给大家介绍的vue中axios的使用与封装详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！