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

1	`npm i axios -S`

常见用法

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

axios并发请求 axios.all

axios.all(
[
  axiost({
     url:''
  }),
  axios({
     url:'',
     params:{
         type:'',
         page:5
     }
 })
]
).then(result=>{
 
})    <br><br>延展写法,这里可以替换上面代码的then部分<br>.then(axios.spread(res1,res2)=>{<br>  console.log(res1);<br>  console.log(res2);<br>})

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

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

axios　的实例和模块封装

在main.js里面写,请看后面,是一定要封装的requrest.js<br><br>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'
   }
})<br><br>const instance2 = axios.create({<br>  baseURL:'http://345.345.345:8000',<br>  timeout:10000,<br>  headers:{}<br>})

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)
     })
  })
}<br><br>//调用<br>request({url}).then(res=>{<br><br>}).catch(err=>{<br><br>}),

最终解决方案简化版

export function request(config)
{
 
       //1.创建axios的实例
       const instance = axios.create({
          baseURL:'http://123.123.123:8000',
          timeout:5000
      })<br><br>      2.axios的拦截器<br><br>      <br>     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
})