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裏面根據請求方式判斷傳參格式的邏輯，需要根據項目要求或者說後端人員給的接口文檔來修改。