vue项目封装axios请求(升级版)

这是我之前写的一个封装办法https://blog.csdn.net/huanhuan03/article/details/103659986
现在重新封装成更方便简单的，学如逆水行舟啊，多看看各大网站的教程，其中用到了async/await语法，如果不明白，看看这篇博客

项目结构什么的就不说了，依然在src目录下新建文件夹service，在service文件夹下新建两个js文件，一个contactApi.js存放项目中所有请求接口的url和请求方式:

const CONTACT_API = {
    // 获取联系人列表
    getContactList:{
        method:'get',
        url:'/contactList'
    },
    // 新建联系人 form-data
    newContactForm:{
        method:'post',
        url:'/contact/new/form'
    },
    // 新建联系人 application/json
    newContactJson:{
        method:'post',
        url:'/contact/new/json'
    },
    // 编辑联系人
    editContact:{
        method:'put',
        url:'/contact/edit'
    },
    // 删除联系人
    delContact:{
        method:'delete',
        url:'/contact'
    }
}
export default CONTACT_API

另一个http.js存放封装逻辑，和请求拦截器、响应拦截器：

import axios from 'axios'
import service from './contactApi'
import {Toast} from 'vant'   // 有赞的Vant UI库
// service 循环遍历输出不同的请求方法
let instance = axios.create({
    baseURL:'http://localhost:9000/api',
    timeout:1000
})
const Http = {}; // 包裹请求方法的容器

// 请求格式/参数的统一
for(let key in service){
    let api = service[key]; // url method
    // async 作用：避免进入回调地狱
    Http[key] = async function(
        params, // 请求参数 get：url，put，post，patch（data），delete：url
        isFormData=false,// 标识是否是form-data请求
        config={} // 配置参数  详细配置查看https://blog.csdn.net/qq_41866776/article/details/98478632
    ){
        let newParams = {}

        //  content-type是否是form-data的判断
        if(params && isFormData){
            newParams = new FormData()
            for(let i in params){
                newParams.append(i,params[i])
            }
        }else{
            newParams = params
        }
        // 不同请求的判断  // 这里依据项目要求自行更改传参格式
        let response = {}; // 请求的返回值
        if(api.method === 'put'|| api.method === 'post'||api.method === 'patch'){
            try{
                response =  await instance[api.method](api.url,newParams,config)
            }catch(err){
                response = err
            }
        }else if(api.method === 'delete'|| api.method === 'get'){
            config.params = newParams    // 即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
            try{
                response =  await instance[api.method](api.url,config)
            }catch(err){
                response = err
            }
        }
        return response; // 返回响应值
    }
}

// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config=>{
    // 发起请求前做些什么
    Toast.loading({
        mask:false,
        duration:0,// 一直存在
        forbidClick:true, // 禁止点击
        message:'加载中...'
    })
    return config
},()=>{
    // 请求错误
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})
// 响应拦截器
instance.interceptors.response.use(res=>{
    // 请求成功
    Toast.clear()
    return res.data
},()=>{
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})

export default Http

将导出的Http在main.js里面挂载在Vue原型上：Vue.prototype.$Http = Http，在页面中的应用：

methods: {
    //   获取联系人列表   // 不传参数
    async getList(){
        let res = await this.$Http.getContactList()
        this.list = res.data
    },
    // 删除联系人    // 传入参数id
    async onDelete(info){
        let res = await this.$Http.delContact(
            {
                id:info.id
            }
        )
        if(res.code === 200){
            Toast('删除成功')
            this.getList()
        }
    }
}

是不是省了很多行代码，而且结构清晰

需要注意的是：在http.js里面根据请求方式判断传参格式的逻辑，需要根据项目要求或者说后端人员给的接口文档来修改。