Vue中Axios的封裝與接口管理詳解

更新時間：2022年03月30日 15:03:48 作者：啵啵丶

在vue項目中和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下

一、 Axios 的封裝

在 Vue 項目中，和后臺進(jìn)行數(shù)據(jù)交互是頻繁且不可或缺的，剛開始沒進(jìn)行 Axios 封裝的時候，每次請求后臺數(shù)據(jù)都是寫的完整的路徑，特別長，尤其是基準(zhǔn)地址，每次都要復(fù)制一遍加在前面，冗余特別大。封裝完 Axios 后，調(diào)用接口就簡短多了，如果后期出現(xiàn)基準(zhǔn)地址的改變，只需要在配置中更改一次即可。

安裝 Axios

npm install axios

引入

我們先在 src 文件夾下創(chuàng)建一個 utils 文件，再在該文件夾下創(chuàng)一個 requery.js 文件

requery.js

import axios from 'axios'
axios.defaults.baseURL = "http://...."  // 這里寫接口基準(zhǔn)地址
export default axios

接口管理

我們再在 src 文件夾下創(chuàng)建一個 api 文件，里面存放接口

我們把一個模塊相關(guān)的接口封裝在一個 .js 文件中，例如我現(xiàn)在創(chuàng)建一個信息管理模塊的接口管理文件，取名為 messageManege.js

① 首先要在該文件中引入我們的 requery.js 文件

import request from '@/utils/requery'

② 封裝方法為 post 的接口

//獲取所有驗(yàn)收數(shù)據(jù)
export const getAllCheck = () => request({
    method:'post',
    url:"manager/selectAllCheckInfo"
})

③ 封裝方法為 get 的接口

//獲取所有延期數(shù)據(jù)
export const getAllDelay = () => request({
    url:"manager/selectAllPostponeInfo"
})

④ 封裝參數(shù)要拼接在鏈接后面的接口

//驗(yàn)收狀態(tài)處理
export const CheckHandle = (x1,x2) => {
    return request({
        method: 'post',
        url:`manager/check?status=${x1}&&id=${x2}`
    })
}

⑤ 封裝請求頭為 "Content-Type": "application/json" 的接口

export const UpdateStage = data => {
    return request({
        method: 'post',
        url: 'stage/update',
        headers: {
            "Content-Type": "application/json",
        },
        data: data
    })
}

注意這里要傳入的 data 要轉(zhuǎn)換成 json 格式

統(tǒng)一暴露接口

在 src/api 的下面新建 index.js 文件用來統(tǒng)一暴露所有接口

import {
    getAllCheck,CheckHandle,getAllDelay,UpdateStage
} from './messageManage'
 
export const getAllCheckAPI = getAllCheck
 
export const CheckHandleAPI = CheckHandle
 
export const getAllDelayAPI = getAllDelay
 
export const UpdateStageAPI = UpdateStage

在組件中使用

① mounted() 中使用

  async mounted() {
    const res = await getAllCheckAPI();
    console.log(res.data)   // 打印返回的數(shù)據(jù)
  },

② 在普通方法中的使用

async StartProcess(s, i) {
      // 調(diào)用后端接口
      return CheckHandleAPI(s, i).then((res) => {
        if (res.status == 200) {
          this.$message.success("狀態(tài)修改成功!");
        } else {
          this.$message.error("狀態(tài)修改失敗!");
        }
      });
},

這樣 axios 的封裝和使用就完成啦~

補(bǔ)充：封裝get方法和post方法

我們常用的ajax請求方法有g(shù)et、post、put等方法，相信小伙伴都不會陌生。axios對應(yīng)的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進(jìn)行一個簡單的封裝。下面我們主要封裝兩個方法：get和post。

get方法：我們通過定義一個get函數(shù)，get函數(shù)有兩個參數(shù)，第一個參數(shù)表示我們要請求的url地址，第二個參數(shù)是我們要攜帶的請求參數(shù)。get函數(shù)返回一個promise對象，當(dāng)axios其請求成功時resolve服務(wù)器返回值，請求失敗時reject錯誤值。最后通過export拋出get函數(shù)。

/**
 * get方法，對應(yīng)get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數(shù)]
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)        
    })    
});}

post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對提交從參數(shù)對象進(jìn)行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個很重要，如果沒有序列化操作，后臺是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。

/** 
 * post方法，對應(yīng)post請求 
 * @param {String} url [請求的url地址] 
 * @param {Object} params [請求時攜帶的參數(shù)] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

這里有個小細(xì)節(jié)說下，axios.get()方法和axios.post()在提交數(shù)據(jù)時參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個參數(shù)是一個{}，然后這個對象的params屬性值是一個參數(shù)對象的。而post的第二個參數(shù)就是一個參數(shù)對象。兩者略微的區(qū)別要留意哦！