uni-app三部曲之二：封裝http請求

1.引言

前面一篇文章寫了使用Pinia進行全局狀態管理。

這篇文章主要介紹一下封裝http請求，發送數據請求到服務端進行數據的獲取。

感謝：

1.yudao-mall-uniapp: 芋道商城，基于 Vue + Uniapp 實現，支持分銷、拼團、砍價、秒殺、優惠券、積分、會員等級、小程序直播、頁面 DIY 等功能，100% 開源

2.3.x文檔 | luch-request

3.Day1-01-uni-app小兔鮮兒導學視頻_嗶哩嗶哩_bilibili

2.token過期后的重新獲取思路

在進行登錄后，通過本地緩存，存儲獲取到的accessToken與refreshToken，accessToken的過期時間為30分鐘，refreshToken過期時間為30天。在每次發送請求時，通過http的請求攔截器，放入accessToken進入header中，后端進行校驗，當accessToken過期后，后端返回的封裝中，code為401，此時應該用refreshToken無感知刷新accessToken繼續本次的請求，當refreshToken也過期后，就需要用戶重新進行登錄。

3.代碼

代碼主要介紹三個部分，第一部分是自定義http的請求攔截器與響應攔截器，第二部分是封裝http的請求，第三部分是如何發送具體的請求。

1.自定義攔截器

請求攔截器主要定義發送請求時的參數，響應攔截器主要處理返回時各種情況。具體可查看文檔

import { getRefreshToken, getAccessToken, setAccessToken } from '@/utils/auth'
import { platform } from '@/utils/platform'
import { useUserStore } from '@/store'
import Request from 'luch-request'
import * as authApi from '@/api/auth'const options = {// 顯示操作成功消息 默認不顯示showSuccess: false,// 成功提醒 默認使用后端返回值successMsg: '',// 顯示失敗消息 默認顯示showError: true,// 失敗提醒 默認使用后端返回信息errorMsg: '',// 顯示請求時loading模態框 默認顯示showLoading: true,// loading提醒文字loadingMsg: '加載中',// 需要授權才能請求 默認放開auth: false,// ...
}// Loading全局實例
const LoadingInstance = {target: null,count: 0,
}/*** 關閉loading*/
function closeLoading() {if (LoadingInstance.count > 0) LoadingInstance.count--if (LoadingInstance.count === 0) uni.hideLoading()
}
/*** @description 請求基礎配置 可直接使用訪問自定義請求*/
const http = new Request({// 請求基準地址baseURL: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL,timeout: 8000,header: {Accept: '*/*','Content-Type': 'application/json;charset=UTF-8',platform,},// #ifdef APP-PLUSsslVerify: false,// #endif// #ifdef H5// 跨域請求時是否攜帶憑證（cookies）僅H5支持（HBuilderX 2.6.15+）withCredentials: false,// #endifcustom: options,
})/*** @description 請求攔截器*/
http.interceptors.request.use((config) => {// 自定義處理【loading 加載中】：如果需要顯示 loading，則顯示 loadingif (config.custom.showLoading) {LoadingInstance.count++LoadingInstance.count === 1 &&uni.showLoading({title: config.custom.loadingMsg,mask: true,fail: () => {uni.hideLoading()},})}// 添加 token 請求頭標識const token = getAccessToken()if (token) {config.header.Authorization = `Bearer ${token}`}return config},(error) => {return Promise.reject(error)},
)/*** @description 響應攔截器*/
http.interceptors.response.use((response) => {// 自定處理【loading 加載中】：如果需要顯示 loading，則關閉 loadingresponse.config.custom.showLoading && closeLoading()// 返回結果：包括 code + data + msgconst resData = response.dataconst code = resData.codeif (code === 200) {return Promise.resolve(response.data)} else if (code === 401) {return refreshToken(response.config)} else {uni.showToast({title: resData.message || '出錯啦！',icon: 'none',mask: true,})}},(error) => {let errorMessage = '網絡請求出錯'if (error !== undefined) {switch (error.statusCode) {case 400:errorMessage = '請求錯誤'breakcase 401:errorMessage = '請登錄'// 正常情況下，后端不會返回 401 錯誤，所以這里不處理 handleAuthorizedbreakcase 403:errorMessage = '拒絕訪問'breakcase 404:errorMessage = '請求出錯'breakcase 408:errorMessage = '請求超時'breakcase 429:errorMessage = '請求頻繁, 請稍后再訪問'breakcase 500:errorMessage = '服務器開小差啦,請稍后再試~'breakcase 501:errorMessage = '服務未實現'breakcase 502:errorMessage = '網絡錯誤'breakcase 503:errorMessage = '服務不可用'breakcase 504:errorMessage = '網絡超時'breakcase 505:errorMessage = 'HTTP 版本不受支持'break}if (error.errMsg.includes('timeout')) errorMessage = '請求超時'// #ifdef H5if (error.errMsg.includes('Network'))errorMessage = window.navigator.onLine ? '服務器異常' : '請檢查您的網絡連接'// #endif}if (error && error.config) {if (error.config.custom.showError === false) {uni.showToast({title: error.data?.msg || errorMessage,icon: 'none',mask: true,})}error.config.custom.showLoading && closeLoading()}return false},
)// Axios 無感知刷新令牌，參考 https://www.dashingdog.cn/article/11 與 https://segmentfault.com/a/1190000020210980 實現
let requestList = [] // 請求隊列
let isRefreshToken = false // 是否正在刷新中
const refreshToken = async (config) => {// 如果當前已經是 refresh-token 的 URL 地址，并且還是 401 錯誤，說明是刷新令牌失敗了，直接返回 Promise.reject(error)if (config.url.indexOf('/auth/refresh-token') >= 0) {isRefreshToken = falseuni.navigateTo({ url: '/pages/login/index' })return Promise.reject(new Error('error'))}console.log('過期', config)// 如果未認證，并且未進行刷新令牌，說明可能是訪問令牌過期了if (!isRefreshToken) {isRefreshToken = true// 1. 如果獲取不到刷新令牌，則只能執行登出操作const refreshToken = getRefreshToken()if (!refreshToken) {return handleAuthorized()}// 2. 進行刷新訪問令牌const refreshTokenData = reactive({refreshToken: getRefreshToken(),clientId: import.meta.env.VITE_CLIENT_ID,})const res = await authApi.refreshToken(refreshTokenData)console.log(res)setAccessToken(res.data.accessToken)try {// 2.1 刷新成功，則回放隊列的請求 + 當前請求config.header.Authorization = 'Bearer ' + getAccessToken()requestList.forEach((cb) => {cb()})requestList = []return request(options)} catch (e) {// 為什么需要 catch 異常呢？刷新失敗時，請求因為 Promise.reject 觸發異常。// 2.2 刷新失敗，只回放隊列的請求requestList.forEach((cb) => {cb()})// 提示是否要登出。即不回放當前請求！不然會形成遞歸return handleAuthorized()} finally {requestList = []isRefreshToken = false}} else {// 添加到隊列，等待刷新獲取到新的令牌return new Promise((resolve) => {console.log('重試', config)requestList.push(() => {config.header.Authorization = 'Bearer ' + getAccessToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改resolve(request(options))})})}
}/*** 處理 401 未登錄的錯誤*/
const handleAuthorized = () => {const userStore = useUserStore()userStore.userLogout()isRefreshToken = false// 是否進入登錄頁uni.showModal({title: '提示',content: '重新登錄？',success: function (res) {if (res.confirm) {uni.navigateTo({ url: '/pages/login/index' })}},})// 登錄超時return new Promise<IResData<boolean>>((resolve, reject) => {const res: IResData<boolean> = {code: 401,message: '請重新登錄',data: false,}reject(res)})
}const request = (config) => {return http.middleware(config)
}export default request

auth.ts/*** 存儲用戶身份信息令牌*/export const CACHE_KEY = {ACCESS_TOKEN: 'access_token',REFRESH_TOKEN: 'refresh_token',
}// 存儲訪問令牌
export const setAccessToken = (accessToken: string) => {uni.setStorageSync(CACHE_KEY.ACCESS_TOKEN, accessToken)
}// 存儲刷新令牌
export const setRefreshToken = (refreshToken: string) => {uni.setStorageSync(CACHE_KEY.REFRESH_TOKEN, refreshToken)
}// 獲取訪問令牌
export const getAccessToken = () => {return uni.getStorageSync(CACHE_KEY.ACCESS_TOKEN)
}// 獲取刷新令牌
export const getRefreshToken = () => {return uni.getStorageSync(CACHE_KEY.REFRESH_TOKEN)
}// 清理本地所有緩存
export const clearStorage = () => {uni.clearStorageSync()
}

2.封裝http請求

/*** 封裝不同類型的restful請求*/import request from './request'// 全局要用的類型放到這里type IResData<T> = {code: numbermessage: stringdata: T
}export default {get: async <T = any>(options: any) => {const res = await request({ method: 'GET', ...options })return res as unknown as IResData<T>},post: async <T = any>(option: any) => {const res = await request({ method: 'POST', ...option })return res as unknown as IResData<T>},postOriginal: async (option: any) => {const res = await request({ method: 'POST', ...option })return res},delete: async <T = any>(option: any) => {const res = await request({ method: 'DELETE', ...option })return res as unknown as IResData<T>},put: async <T = any>(option: any) => {const res = await request({ method: 'PUT', ...option })return res as unknown as IResData<T>},download: async <T = any>(option: any) => {const res = await request({ method: 'GET', responseType: 'blob', ...option })return res as unknown as Promise<T>},upload: async <T = any>(option: any) => {option.headersType = 'multipart/form-data'const res = await request({ method: 'POST', ...option })return res as unknown as Promise<T>},
}

3.定義請求

import http from '@/service/http'/** 用戶登錄 */
export const login = (data: LoginReqVO) => {return http.post({ url: '/auth/login', data })
}

4.寫在最后

在本項目開始，使用了uni.request來發送http請求，通過uni-app的攔截器配置請求攔截器，后面學習研究的時候發現了luch-request，通過文檔然后參考yudao-mall-uniapp項目，封裝http請求，通過測試，發現能滿足實際需用需求。

當然，本篇文章寫的比較簡陋，水平有限，歡迎共同探討指教。