axios 的封装

在 vue 项目中，和后台交互获取数据这块，我们通常使用的是 axios 库，它是基于 promise 的 http 库，可运行在浏览器端和 node.js 中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换 json、客户端防御 XSRF 等。所以我们的尤大大也是果断放弃了对其官方库 vue-resource 的维护，直接推荐我们使用 axios 库。如果还对 axios 不了解的，可以移步 axios 文档。

安装

npm install axios; // 安装axios

引入

一般我会在项目的 src 目录中，新建一个 request 文件夹，然后在里面新建一个 http.js 和一个 api.js 文件。http.js 文件用来封装我们的 axios，api.js 用来统一管理我们的接口。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant'; 

环境的切换

if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.正式.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.测试.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.生产.com';
}

设置请求超时

通过 axios.defaults.timeout 设置默认的请求超时时间。例如超过了 10s，就会告知用户当前请求超时，请刷新等。

axios.defaults.timeout = 10000; 

请求头的设置

const service = axios.create({
   header: {
       'Content-Type': 'application/x-www-form-urlencoded'
   }
   })

请求拦截

我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访 问的，或者 post 请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。

// 请求拦截器

axios.interceptors.request.use(    
service.interceptors.request.use(request => {
    // 每发起一个请求，pendingCount加1
    // 如果不希望某个接口访问出现loading
    // 在对应的baseRequest上添加headers: { 'No-Request-Loading': true }即可
    if (!request.headers['No-Request-Loading']) {
        pendingCount++
    }
    if (pendingCount) {
        addMask()
    }

    const auth = md5('qwerty_mailTo_123456')
    const _time = +new Date()

    request.method === 'post' && !request.params?
            request.data = {...request.data, auth: auth, _time:_time}:
            request.params = {...request.params, auth: auth, _time:_time}
    return request

}, error => {
    return Promise.reject(error)
})


// 响应拦截器
service.interceptors.response.use(response => {
    // 每结束一个请求，pendingCount减1
    // 有可能结束的请求是没有Loading遮罩的，所以最多减到0
    if (pendingCount) {
        pendingCount--
    }
    if (!pendingCount) {
        removeMask()
    }
    if (!response || !response.data) {
        ui.Message({
            message: '服务器返回空',
            type: 'error',
            offset: 60
        })
    }

    // 这里根据后端提供的数据进行对应的提示处理
    if (response.data.errno !== 2000) {
        ui.Message({
            message: response.data.errmsg,
            type: 'error',
            offset: 60
        })

    }
    return response
}, error => {
    removeMask()
    const status = error.response.status
    ui.Message({
        message: '网络异常，错误码:' + status +',
        type: 'error',
        offset: 60
    })
        return Promise.reject(error)
})    

响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的状态码是 2000，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

封装 get 方法和 post 方法

我们常用的 ajax 请求方法有 get、post、put 等方法，相信小伙伴都不会陌生。axios 对应的也有很多类似的方法，不清楚的可以看下文档。但是为了简化我们的代码，我们还是要对其进行一个简单的封装。下面我们主要封装两个方法：get 和 post。

get 方法：我们通过定义一个 get 函数，get 函数有两个参数，第一个参数表示我们要请求的 url 地址，第二个参数是我们要携带的请求参数。get 函数返回一个 promise 对象，当 axios 其请求成功时 resolve 服务器返回 值，请求失败时 reject 错误值。最后通过 export 抛出 get 函数。

post 方法：原理同 get 基本一样，但是要注意的是，post 方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过 'Content-Type': 'application/x-www-form-urlencoded'
这个很重要，如果没有序列化操作，后台是拿不到你提交的数据。