博客

Axios的封装

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

1

安装

npm install axios; // 安装axios

2

引入

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

3

环境的切换

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';
}

4

设置请求超时

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

axios.defaults.timeout = 10000;    

5

请求header的设置

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

6

请求拦截

// 请求拦截器

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，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

7

封装get方法和post方法

'Content-Type': 'application/x-www-form-urlencoded'

这个很重要，如果没有序列化操作，后台是拿不到你提交的数据。