分享一個自己封裝的 axios 網絡請求

主要的功能及其優點：

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

1.封裝請求：

1. 首先在 src 目錄下創建 http 目錄。繼續在 http 目錄中創建 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.動態接口的使用：

//示例：刪除用戶 deleteUser() { const { data } = await this.$http({ method: 'delete', //動態接口寫法模仿的是vue的動態路由 //這里 params 攜帶的是動態參數，其中 “屬性名” 需要與 api 接口中的 :id 對應 //也就是需要保證攜帶參數的 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() 這種就夠了，所以沒做其他的封裝處理

如果你有更好的想法可以隨時聯系我

如下是封裝所需代碼：

• api.js 管理所有的接口

// 如下接口地址根據自身項目定義 const API = { // base接口 baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 用戶 users: '/users', // “修改”與“刪除”用戶接口（動態接口） usersEdit: '/users/:id', } export default API 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

• index.js 邏輯代碼

// 這里請求封裝的主要邏輯，你可以分析并將他優化，如果有更好的封裝方法歡迎聯系我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') { //拿到動態 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] } })(), //獲取查詢字符串參數 params: options.params, //獲取請求體字符串參數 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設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。



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



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