函数新增对象特性

概述

vue3 中封装 axios 后一般返回一个用于发送 http 请求的函数，此时为了兼容传统写法，req.get() 或者 req.post() ，可以如下封装为返回函数的同时添加对象的特性，

实现

在最后的 export 为返回的函数新增多个属性

import axios from 'axios'
import envConfig from '../config'
import { ElMessage } from 'element-plus'

const req = axios.create({
    baseURL:envConfig.baseURL,
    timeout: 8000 // 请求超时8秒
})

req.interceptors.request.use(config => {
    const headers = config.headers
    if(!headers.Authorization) headers.Authorization = 'Bear cc'
    return config
})

req.interceptors.response.use(res => {
    const { code, message, data } = res.data
    if(code !== 1){
        ElMessage.error(message)
        return Promise.reject(message)
    }
    return data
})

/**
 * 
 * @param {*} options axios 用到的请求参数选项
 * @returns 
 */
function request(options){
    options.method = options.method || 'get' // 选项中没有设定请求类型默认为 get

    // axios.get方法的参数名称是 param，而post方法参数名称是data
    // 这里统一将 get 时的 param 对外暴露为名称 data
    // 即调用者不用管是 get post，统一将请求参数设定到 data 属性上
    if(options.method.toLowerCase() === 'get'){
        options.param = options.data 
    }

    // 保证生产环境中时一定使用 baseUrl，不可使用 mockUrl
    // 非生产环境时根据属性 mock 决定是否使用 mockUrl
    if(envConfig.env === 'prod'){
        req.defaults.baseURL = envConfig.baseURL
    }else{
        const url = envConfig.mock ? envConfig.mockUrl : envConfig.baseURL
        req.defaults.baseURL = url
    }
    return req(options)
}

['get','post','put','delete','patch'].forEach(item => {
    request[item] = (url,data,options) => {
        return request({
            url,data,method:item,
            ...options
        })
    }
})
export default request

调用时可以有两种方法

onMounted(() => {
    // 第一种方法
    req({
         method:'get',url:'/login',
     }).then(res => {console.log('业务组件login中请求登录的响应结果：', res)})
    
    // 第二种方法
    req.get('/login').then(res => console.log('扩展方法请求登录：', res))
})