Axios 的封装和 API 接口的管理

一、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函数。

axios的封装基本就完成了，下面再简单说下api的统一管理。

//我们可以新建我们的js文件

import baseRequest from './base'
export function userLogin (data) {
    return baseRequest({
        url: '/ones/Login/doLogin',
        method: 'POST',
        data: data
    })
}

// 在页面内调用

axios的封装根据需求的不同而不同