基于 Vue，不過通用性還行

人老了，開始忘事了，哎呀呀呀，還是記一下...

功能

• token 鑒權(quán)混入
• 可取消
• 錯(cuò)誤封裝

源碼

• 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 到參數(shù)中
// 不過這個(gè)示例 token 寫在  headers
// 故這里沒有加額外 token 參數(shù)
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 鑒權(quán)字段
    config.headers.Authorization = cookie.get('token')

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

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

    // 如果后端 code 不是 200
    // 返回后端報(bào)錯(cuò)信息
    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
            }
        })
    }
    
    // 其他錯(cuò)誤
    //  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, // 活動(dòng)類型 1-堂食 2-外賣
        },
        (cancelPrevSearch) => {
            this.cancelPrevSearch = cancelPrevSearch
        }
    )

    if (err) {
        // 忽略取消的錯(cuò)誤
        if (axios.isCancel(err)) return

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

        this.goodsList = list
    }
}

總結(jié)

• 接口封裝還不是很順手的感覺，還是要人為維護(hù)避免接口名稱 apiName 重復(fù)

6 月最后一天了，沖呀

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