分享一個自己封裝的 axios 網路請求
主要的功能及其優點：
將所有的介面放在一個檔案夾中管理（api.js），并且可以支持動態介面，就是 api.js 檔案中定義的介面可以使用 :xx 占位，根據需要動態的改變，動態介面寫法模仿的是vue的動態路由，如果你不熟悉動態路由可以看看我的這篇文章：Vue路由傳參詳解（params 與 query）
1.封裝請求：
- 首先在 src 目錄下創建 http 目錄，繼續在 http 目錄中創建 api.js 檔案與 index.js 檔案，
- 然后再 main.js 檔案中匯入 http 目錄下的 index.js 檔案，將請求注冊為全域組件，
- 將下面封裝所需代碼代碼粘到對應的檔案夾
2.基本使用：
//示例：獲取用戶串列
getUsers() {
const { data } = await this.$http({
url: 'users' //這里的 users 就是 api.js 中定義的“屬性名”
})
},
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,
},
},
})
},
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
- 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
})
}
- main.js 將請求注冊為全域組件
import Vue from 'vue'
// 會自動匯入 http 目錄中的 index.js 檔案
import http from './http'
Vue.prototype.$http = http
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299357.html
標籤：其他
上一篇：Java專案:網上商城系統設計和實作(java+Springboot+ssm+mysql+jsp+maven)
下一篇：Reflect