axios 封裝，API接口統(tǒng)一管理，支持動態(tài)API！

2021-9-13    前端達人

分享一個自己封裝的 axios 網(wǎng)絡請求

主要的功能及其優(yōu)點：

將所有的接口放在一個文件夾中管理（api.js）。并且可以支持動態(tài)接口，就是 api.js 文件中定義的接口可以使用 :xx 占位，根據(jù)需要動態(tài)的改變。動態(tài)接口用法模仿的是vue的動態(tài)路由，如果你不熟悉動態(tài)路由可以看看我的這篇文章：Vue路由傳參詳解（params 與 query）

1.封裝請求：

  1. 首先在 src 目錄下創(chuàng)建 http 目錄。繼續(xù)在 http 目錄中創(chuàng)建 api.js 文件與 index.js 文件。
  2. 然后再 main.js 文件中導入 http 目錄下的 index.js 文件。將請求注冊為全局組件。
  3. 將下面封裝所需代碼代碼粘到對應的文件夾

2.基本使用： 

//示例：獲取用戶列表 getUsers() { const { data } = await this.$http({ url: 'users' //這里的 users 就是 api.js 中定義的“屬性名” }) }, 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

3.動態(tài)接口的使用： 

//示例：刪除用戶 deleteUser() { const { data } = await this.$http({ method: 'delete', //動態(tài)接口寫法模仿的是vue的動態(tài)路由 //這里 params 攜帶的是動態(tài)參數(shù)，其中 “屬性名” 需要與 api 接口中的 :id 對應 //也就是需要保證攜帶參數(shù)的 key 與 api 接口中的 :xx 一致 url: { // 這里的 name 值就是 api.js 接口中的 “屬性名” name: 'usersEdit', params: { id: userinfo.id, }, }, }) }, 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    •

4.不足：

封裝的請求只能這樣使用 this.$http() 。不能 this.$http.get() 或 this.$http.delete()

由于我感覺使用 this.$http() 這種就夠了，所以沒做其他的封裝處理

如果你有更好的想法可以隨時聯(lián)系我

如下是封裝所需代碼：

  • api.js 管理所有的接口 
// 如下接口地址根據(jù)自身項目定義 const API = { // base接口 baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 用戶 users: '/users', // “修改”與“刪除”用戶接口（動態(tài)接口） usersEdit: '/users/:id', } export default API 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •
  • index.js 邏輯代碼 
// 這里請求封裝的主要邏輯，你可以分析并將他優(yōu)化，如果有更好的封裝方法歡迎聯(lián)系我Q：2356924146 import axios from 'axios' import API from './api.js' const instance = axios.create({ baseURL: API.baseURL, timeout: '8000', method: 'GET' }) // 請求攔截器 instance.interceptors.request.use( config => { // 此處編寫請求攔截代碼，一般用于加載彈窗，或者每個請求都需要攜帶的token console.log('正在請求...') // 請求攜帶的token config.headers.Authorization = sessionStorage.getItem('token') return config }, err => { console.log('請求失敗', err) } ) // 響應攔截器 instance.interceptors.response.use( res => { console.log('響應成功') //該返回對象會綁定到響應對象中 return res }, err => { console.log('響應失敗', err) } ) //options 接收 {method, url, params/data} export default function(options = {}) { return instance({ method: options.method, url: (function() { const URL = options.url if (typeof URL === 'object') { //拿到動態(tài) url let DynamicURL = API[URL.name] //將 DynamicURL 中對應的 key 進行替換 for (const key of Object.keys(URL.params)) { DynamicURL = DynamicURL.replace(':' + key, URL.params[key]) } return DynamicURL } else { return API[URL] } })(), //獲取查詢字符串參數(shù) params: options.params, //獲取請求體字符串參數(shù) data: options.data }) } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    •
  • main.js 將請求注冊為全局組件 
import Vue from 'vue' // 會自動導入 http 目錄中的 index.js 文件 import http from './http' Vue.prototype.$http = http


    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。





    分享此文一切功德，皆悉回向給文章原作者及眾讀者
轉自：csdn.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。 





    藍藍設計( bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

分享本文至：

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔