一些关于使用axios的心得

2022-12-16 0 565

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就能了

除非页面足够简单,不然我个人不太喜欢此种做法。

相关文章推荐

Vue2.0 探索之路——生命周期和钩子函数的许多理解

基于 Vue 构建的 Web App 项目大集合

相关讲堂推荐

Vue.js 实战之插件篇

一些关于使用axios的心得

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务