axios的使用

本篇博客简要讲述本人在前端vue开发过程中对于axios的理解

---

---

前言

作为一个刚刚出门的小实习生，在我现有的开发生涯中，前端网络数据请求上我就使用过vue-resource,axios。在学校学习时使用vue2x接触到的vue-resource，开始实习后接触到axios。然后就一直使用axios，在接触到多个项目后,想要对axios做一个小小的总结,便于以后更灵活地使用。

---

一、axios是什么？

在axios之前，vue使用的是vue-resource，我目前知道的vue-resource被替代的原因是不在进行维护和更新。本人也没有使用vue-resource的拦截器和请求器。
Axios是一个基于Promise的Http库(可以实现异步)，用在浏览器端和NodeJS 的异步通信框架。
前端通信大部分都是基于XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

                                  Axios功能特点

1. 从浏览器中创建XMLHttpRequests
2. 从node.js创建http请求
3. 支持Promise API【JS中链式编程】
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防御XSRF（跨站请求伪造）

二、使用步骤

1.引入库

代码如下（示例）：

npm axios from 'axios'

安装完毕后可以在main.js中引入，也可以在axios.js中直接使用。我目前使用的方式为urls.js中写接口的路径，axios.js中写拦截器的逻辑，对请求做一些设置。token处理，在api.js中调用axios，urls完成接口的实现。

axios在使用时不需要use，主要原因时axios并不同于主要供给vue使用的模块，axios是通用化ajax库，这种库可以用vue.prototype继承方法，然后this调用。

2.axios使用

先创建axios实例，创建axios实例的方法多种多样

1，引用axios后直接设置配置，这种配置方式会影响到所有的接口，本人在目前实习阶段就是采用这种写法较多

这里我是将所有的接口地址都写在urls.js下，这里的baseURL可以根据生产环境配置

if(process.env.NODE_ENV === 'development') {
    baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
    baseURL = 'xxx生产环境xxx';
}

npm axios from 'axios'
// 携带Cookie
axios.defaults.baseURL = urls.BASE_URL
axios.defaults.withCredentials = true
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 默认Post请求使用 application/json 形式
axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.timeout = 10000

2，第二种方法就是实例化一个axios对象，这个方法主要的好处就是创建多个axios，一部分接口用一部分axios,属性也都可以设置

let newAxios = axios.create({
    baseURL: 'xxxxx',
    timeout: 1000, 
    withCredentials:true

在第二种的基础上可以针对个别接口进行设置

instance.get('/xxx',{
    timeout: 5000
})

注意点：

axios的配置，以及请求拦截器，是对请求体的一个封装，设置多种多样。请求中需要的都可以进行设置，例如处理一些数据流。在进行图片下载，excel下载的时候非常关键。

axios请求拦截器

这个时候拦截下来的请求还没有发出，在这个是时候我们可以对这个请求进行各种操作，高级一点的拦截器，还可以根据请求发出的一些信息，进行过滤。例如，一些接口需要token或者其他的登录信息。往往会在后端进行验证，但是在程序请求量非常大的时候，可以在前端进行验证，请求中没有的必要信息的时候进行拦截。

axios.interceptors.request.use(res => {
    // 封装请求
    ...
    return res
}, err => {
    // 请求出现错误时回调
    return Promise.reject(err)
})

axios响应拦截器

// 
axios.interceptors.reponse.use(res => {
    // 对结果数据进行操作
    return res
}, err => {
 //接口处理错误
    return Promise.reject(err)
})

注意：这里的接口错误是接口请求出现错误。有时需要在数据结构操作逻辑里进行错误判断。以及进行错误信息的弹出，例如code为401等错误信息。

// 响应拦截器
axios.interceptors.response.use(
  res => {
    // console.log(res)
    if (res.config && !res.config.headers.Authorization && res.config.url.endsWith(urls.common.LOGIN)) {
      tokenHelper.setToken(res.headers.authorization)
    }
    if (res.data.code != 200) {
      if (res.data.code == 401) {
        ElMessage.error(res.data.msg || '登录状态失效，请重新登录')
        router.push('/')
      } else if (res.data.msg) {
        ElMessage.error(res.data.msg)
      }
      return Promise.reject(res.data)
    }
    if (res.data.total || res.data.total == 0) {
    //分页接口使用时更为方便，少写一个data
      return {
        data: res.data.data,
        total: res.data.total
      }
    } else {
      return res.data.data
    }
  },