vue中axios的使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情

前言

在很久以前项目中向服务器请求数据是通过发送Ajax请求来获取的，以前使用原生的 XMLHTTPRequest，然后就是jquery的ajax，不过jquery已经迟暮了，fetch还需要完善，现在用的最多的当属axios

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。包括vue的作者也是放弃了vue-resource的维护，推荐使用axios库

axios的基本使用

使用axios需要安装，可以通过npm install axios --save命令安装，然后在main.js导入全局使用,那axios如何使用呢？相对比传统的ajax请求方式模板写起来比较长和复杂

function ajaxPromise(){
  let promise=new Promise((resolve,reject)=>{
    const xhr=new XMLHttpRequest()

    xhr.open('GET','http://127.0.0.1:8000')

    xhr.send()

    xhr.onreadystatechange=function(){
      if(xhr.readyState===4){
        if(xhr.status>=200 && xhr.status<300){
          resolve(xhr.response)
        }else{
          reject(new Error(xhr.statusText))
        }
      }
    }
  })
  return promise
}

而使用axios就大大减少了代码量，也方便了阅读，而axios是通过Promise实现对ajax技术的一种封装，返回的结果是一个promise对象，可以直接用then接收

axios({
  method:'GET' //请求方式，默认GET请求
  url:url, //请求地址
  params:params, //get请求使用params参数
  data:data  //post请求使用data参数
}).then(res=>{
  console.log(res)
})

axios拦截器的使用

axios提供了一个create方法用于生成axios实例，在创建的时候传入一个对象，可以设置属性baseURL，会自动加在url前面，除非url是一个绝对URL，便于为 axios 实例的方法传递相对的URL。还可以加一个timeout属性，用于指定请求超时的毫秒数

const instance=axios.create({
  baseURL:'http://localhost:3000',
  timeout:5000
})

当我们每次请求都想要拦截下来进行一些相应的处理，我们可以使用拦截器，axios实例有个interceptors属性，属性里有个response.use，这是响应拦截器会接收两参数，一个是我们请求回来的结果，另一个是返回的错误，这样就相当于使用了相应拦截器做了一层拦截

instance.interceptors.response.use(res=>{
  // console.log(res);
  if(res.code==200){ //根据不同的code作出不同的处理
      return res.data
  }else{
      return Promise.reject(msg)
  }
},err=>{
  console.log(err);
})

除了响应拦截器还有一个请求拦截器，我们可以在发出请求时，拦截下用户的请求，执行完一系列处理再发送出去（例如添加cookie，token等）

instance.interceptors.request.use(config=>{
  //例如在请求头里添加token再发送请求出去
  config.headers.Authorization=window.sessionStorage.getItem('token')
  return config
},err=>{
  // console.log(err);
})