1.带cookie允诺
axios预设是允诺的这时候不能所带cookie的,须要透过增设 withCredentials:true来化解。
2. 使post允诺推送的是formdata文件格式统计数据具体来说要增设允诺头:
//能透过此种形式给axios增设的预设允诺头
axios.defaults.headers ={
“Content-Type”:“application/x-www-form-urlencoded”
}
其二再推送以后须要处置呵呵统计数据:
// 推送允诺前处置request的统计数据
axios.defaults.transformRequest =[function(data){
// Do whatever you want to transform the data
let newData =
for(let k in data){
newData += encodeURIComponent(k)+=+encodeURIComponent(data[k])+&
}
return newData
}]
3.拦截器你能截取允诺或响应在被 then 或者 catch 处置以后。
举个小例子:发ajax允诺的这时候须要有一个loading动画,而在允诺回来之后须要把loading动画关掉,就能采用这个拦截器来实现。
//添加允诺拦截器
axios.interceptors.request.use(config =>{
//在推送允诺以后做某事,比如说 增设loading动画显示
return config
}, error =>{
//允诺错误时做些事
returnPromise.reject(error)
})
//添加响应拦截器
axios.interceptors.response.use(response =>{
//对响应统计数据做些事,比如说把loading动画关掉
return response
}, error =>{
//允诺错误时做些事
returnPromise.reject(error)
})
//如果不想要这个拦截器也简单,能删除拦截器
var myInterceptor = axios.interceptors.request.use(function(){/*…*/})
axios.interceptors.request.eject(myInterceptor)
ps.另外附上自己在项目中采用axios的形式:一般会将所有的ajax允诺放在一个模块中,新建一个http.js:
//http.js
//增设允诺baseURL
axios.defaults.baseURL =/api
//增设预设允诺头
axios.defaults.headers={
“Content-Type”:“application/x-www-form-urlencoded”
}
// 推送允诺前处置request的统计数据
axios.defaults.transformRequest=[function(data){
let newData =
for(let k in data){
newData += encodeURIComponent(k)+=+encodeURIComponent(data[k])+&
}
return newData
}]
// 带cookie允诺
axios.defaults.withCredentials =true
//get允诺
functionget(url){
return body => axios.get(url,{ params: body })
}
//post允诺
function post(url){
return body => axios.post(url, body)
}
//导出采用
exportconst login =get(/login)
假设配合vue采用:
// 引入login模块
import{ login } from http
exportdefault{
methods:{
//配合 async/await采用效果更佳
async get(){
try{
let res = await login({ account:admin})
console.log(res)
}
catch(e){
console.log(e)
}
}
}
}
再另外有些人可能喜欢把axios挂载到Vue的原型上,从而在子组件内能直接访问的到,做法如下:
Vue.prototype.$http = axios //其他页面在采用axios的这时候直接 this.$http就能了
除非页面足够简单,不然我个人不太喜欢此种做法。
相关文章推荐
基于 Vue 构建的 Web App 项目大集合
相关讲堂推荐