Axios 封装

基于 Vue，不过通用性还行

人老了，开始忘事了，哎呀呀呀，还是记一下...

功能

• token 鉴权混入
• 可取消
• 错误封装

源码

• ajax.js

import axios from 'axios'
import cookie from 'js-cookie'

import API from '@/api'
import router from '@/router'

const CancelToken = axios.CancelToken
const _axios = axios.create({
    baseURL: API.baseURL,
    timeout: 10000
})

// 这里可以混入 token 到参数中
// 不过这个示例 token 写在  headers
// 故这里没有加额外 token 参数
function mixinAuth (params = {}) {
    return {
        ...params
    }
}

_axios.interceptors.request.use(config => {
    switch (config.method) {
        case 'put':
        case 'post':
        case 'patch':
            config.data = mixinAuth(config.data)

            break
        default:
            config.params = mixinAuth(config.data)
    }

    // headers 增加 Authorization 鉴权字段
    config.headers.Authorization = cookie.get('token')

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

_axios.interceptors.response.use(response => {
    const res = response.data

    // 如果后端 code 不是 200
    // 返回后端报错信息
    if (res.code !== 200) {
        return Promise.reject(new Error(res.msg))
    }

    return res
}, error => {
    // 403 处理
    if (typeof error.response !== 'undefined' && error.response.status === 403) {
        cookie.remove('token')
        router.go({
            path: '/auth',
            query: {
                redirect: router.history.current.fullPath
            }
        })
    }
    
    // 其他错误
    //  cancel 的可以使用 axios.isCancel(error) 判断
    return Promise.reject(error)
})

export function ajax (api, data = {}, cancellation = () => { }) {
    let { url, method, suffix } = API[api]

    if (typeof suffix !== 'undefined' && suffix.trim() !== '') {
        url = url.replace(`:${suffix}`, data[suffix])
    }

    return new Promise(resolve => {
        _axios({
            url,
            method,
            data,
            cancelToken: new CancelToken(cancellation)
        }).then(res => {
            resolve([null, res.data])
        }).catch(err => {
            resolve([err, null])
        })
    })
}

export default {
    install (Vue) {
        Vue.prototype.$ajax = ajax
    }
}

• api/index.js

import common from './common'

const baseURL = '/api/'

const API =
{
    baseURL,
    ...common,
}

• api/common.js

export default {
    uploadImage: {
        method: 'POST',
        url: 'upload/image',
        desc: '上传图片'
    }
}

使用示例：

async getActivityGoodsList(keyword) {
    const [err, res] = await this.$ajax(
        'getActivityGoodsList',
        {
            keyword,
            activityType: this.$route.query.activityType, // 活动类型 1-堂食 2-外卖
        },
        (cancelPrevSearch) => {
            this.cancelPrevSearch = cancelPrevSearch
        }
    )

    if (err) {
        // 忽略取消的错误
        if (axios.isCancel(err)) return

        this.$Message.error(err.message)
    } else {
        const list = res.list || []

        this.goodsList = list
    }
}

总结

• 接口封装还不是很顺手的感觉，还是要人为维护避免接口名称 apiName 重复

6 月最后一天了，冲呀

—— 2020/06/30 By YSH， Mostly Cloudy.