详解axios在vue中的简单配置与使用
一、axios简介
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，它本身具有以下特征：
- 从浏览器中创建XMLHttpRequest
- 从node.js发出http请求
- 支持PromiseAPI
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
二、引入方式：
npm:
$npminstallaxios //淘宝源 $cnpminstallaxios
bower:
$bowerinstallaxios
cdn:
三、vue中axios的配置
之前那个开源项目一开始就打算用axios，在网上找了好多文章与攻略，发现好多都不太详细，所以打算自己动手配置一个，(不要怂，撸起袖子就是干)。
我的配置：
importaxiosfrom'axios'
importqsfrom'qs'
import*as_from'../util/tool'
axios.defaults.timeout=5000;//响应时间
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';//配置请求头
axios.defaults.baseURL='你的接口地址';//配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config)=>{
//在发送请求之前做某件事
if(config.method==='post'){
config.data=qs.stringify(config.data);
}
returnconfig;
},(error)=>{
_.toast("错误的传参",'fail');
returnPromise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res)=>{
//对响应数据做些事
if(!res.data.success){
//_.toast(res.data.msg);
returnPromise.reject(res);
}
returnres;
},(error)=>{
_.toast("网络异常",'fail');
returnPromise.reject(error);
});
//返回一个Promise(发送post请求)
exportfunctionfetch(url,params){
returnnewPromise((resolve,reject)=>{
axios.post(url,params)
.then(response=>{
resolve(response.data);
},err=>{
reject(err);
})
.catch((error)=>{
reject(error)
})
})
}
四、vue中使用配置好的axios
exportdefault{
/**
*用户登录
*/
Login(params){
returnfetch('/users/api/userLogin',params)
},
/**
*用户注册
*/
Regist(params){
returnfetch('/users/api/userRegist',params)
},
/**
*发送注册验证码
*/
RegistVerifiCode(tellphone){
returnfetch('/users/api/registVerifiCode',{tellphone:tellphone})
},
......
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。