vue 之 axios的使用(拦截器)

为什么选择axios?作者推荐和功能特点

作者在2016年11月发微博:vue-resource不在为官方推荐的ajax库,推荐使用axios

功能特点:

   在浏览器中发送XMLHttpRequests请求

   在node.js中发送http请求

  支持Promise API

  拦截请求和响应

  转换请求和响应数据

 

axios请求方式

   axios(config)

   axios.request(config)

  axios.get(url[,config])

  axios.delete(url[,config])

  axios.head(url[,config])

  axios.post(url[,data[,config]])

  axios.put(url[,data[,config]])

  axios.patch(url[,data[,config]])

 

安装axios

npm i axios -S

 

常见用法

axios({
    url:'请求地址',
    method:'get' //默认是get请求,可以不写
}).then(res=>{
     console.log(res) 
})


axios.post(url,{name:'',age:18})

 

axios并发请求 axios.all

axios.all(
[
  axiost({
     url:''
  }),
  axios({
     url:'',
     params:{
         type:'',
         page:5
     }
 })
]
).then(result=>{

})    

延展写法,这里可以替换上面代码的then部分
.then(axios.spread(res1,res2)=>{
  console.log(res1);
  console.log(res2);
})

　　

axios全局配置,其他请查看官网

axios.defaults.baseURL = 'http://123.123.123:8080'
axios.defaults.timeout = 5

 

axios　的实例和模块封装

在main.js里面写,请看后面,是一定要封装的requrest.js

const instance1 = axios.create({
   baseURL:'http://123.123.123:8000',
   timeout:5000
})

instance1({
  url:'/home/mltidata'
}).then(res=>{

})

instance1({
   url:'/home/data',
   params:{
      name:'张三',
      age:'18'
   }
})

const instance2 = axios.create({
  baseURL:'http://345.345.345:8000',
  timeout:10000,
  headers:{}
})

　　

request.js

import axios from 'axios'

export function request(config,success,failure){
    //1.创建axios的实例
     const instance = axios.create({
         baseURL:'http://123.123.123:8000',
         timeout:5000
     })  

}

//发送真正的网络请求
instance(config).then(res=>{
   success(res)
}).catch(err=>{
   failure(err)
})

//调用

request({url:""},res=>{},err=>{})

　　

最终的解决方案(推荐使用)

export function request(config)
{
  return new Promise((resolve,reject)=>{
       //1.创建axios的实例
       const instance = axios.create({
          baseURL:'http://123.123.123:8000',
          timeout:5000
      })
      instance(config).then(res=>{
         resolve.log(res)
     }).catch(err=>{
          reject(err)
     })
  })
}

//调用
request({url}).then(res=>{

}).catch(err=>{

}),

　　

最终解决方案简化版

export function request(config)
{

       //1.创建axios的实例
       const instance = axios.create({
          baseURL:'http://123.123.123:8000',
          timeout:5000
      })

      2.axios的拦截器

      
     3.发送真正的网络请求
     return instance(config)
}

//调用
request({url}).then(res=>{

}).catch(err=>{

}),

　　

如何使用拦截器?

使用场景:

 1.比如config中一些信息不符合服务器的要求

 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标

 3.某些网络请求(比如登录(token),必须携带一些特殊的信息)

axios提供了拦截器,用于每次发送请求或者得到响应后,进行对应的处理

//配置请求和响应拦截
instance.interceptors.request.use(config=>{
   console.log('来到了request拦截success中');
   return config
},err=>{
   console.log('来到了request拦截器failure中')
   return err
})

instance.interceptors.response.use(response=>{
   console.log('来到了response拦截success中');
   return response.data
},err=>{
   console.log('来到了response拦截器failure中')
   return err
})