利用axios进行二次封装

        因为在项目中我们经常会在不同的页面进行数据的渲染，而使用的数据通常会经过发起网络请求的方式来实现，在很多时候我们进行的操作都会繁杂且重复，这时候我们就会想到将一部分通用的操作给提取出来，进行一个二次封装，这样就会更加便于我们进行数据网络请求操作，

        下面是一个实例axios的二次封装：

​
// 引入需要用到的axios网络请求包资源，前提在项目中需要自己先安装
import axios from 'axios'
// 引入存在状态管理里面的token
import store from '../store'

const Ajax = axios.create({
    baseURL: '/apis',
    timeout: 15000
})

// 实现请求前拦截
// 在拦截器中，如果没有问题，直接返回AxiosRequestConfig，否则返回Promise.reject方法，这个方法会在Ajax.request的catch回调上捕获
Ajax.interceptors.request.use(function(config) {
    let token = store.getState().common.token,
        otherPath = ['/user/login'] // 不需要进行请求拦截的请求地址

    if (otherPath.includes(config.url)) {
        return config
    } else {
        if (!token) {
            return Promise.reject({code: 400, message: 'token参数不存在'})
        } else {
            config.headers.token = token
            return config
        }
    }
})

export default req => {
    if (!req.url) throw new Error('异步请求，url地址必传')

    return new Promise(resolve => {
        Ajax.request({
            url: req.url,
            method: req.method || 'get',
            data: req.data || {},
            params: req.params || {},
            // 文件上传进度的回调函数
            // onUploadProgress?: (progressEvent: any) => void; 他需要接收一个回调函数
            onUploadProgress: req.fileUpload || (() => {})
        }).then(({data}) => {
            resolve(data)
        }).catch(e => {
            console.log(e)
            resolve({code: 500, message: '后端接口问题，请联系后端处理'})
        })
    })
}

​

这是一个简单的二次封装，在实际的项目中会比这个更加的复杂！