在網絡開發中，封裝一個簡潔、高效的網絡請求模塊對于項目的可維護性和擴展性至關重要。本文將詳細介紹如何在NuxtJS中封裝一個通用的網絡請求模塊，并結合最佳實踐來說明如何使用它來進行網絡請求。
良好的代碼結構和封裝，不但結構清晰還能夠大幅提高開發效率。下面以實戰為例，以獲取用戶排行榜頁面的完整實現為實戰背景，詳細介紹下NuxtJS中網絡請求的封裝與最佳實戰。
如下圖所示，右側為用戶排行榜的實現效果展示。本文詳細展示網絡請求的模塊化封裝和在具體頁面上的網絡接口使用。
封裝網絡請求模塊
首先，引入所需的庫和工具函數。使用getToken和delToken來處理用戶的認證令牌。封裝一個網絡請求的工具方法。
//hooks/userToken.ts
import { useCookie } from '#app'// 獲取 Token
export const getToken = () => {const Token = useCookie('hw_token')return Token.value
}// 設置 Token
export const setToken = (val: string) => {const Token = useCookie('hw_token')Token.value = val
}// 清空 Token
export const delToken = () => {const Token = useCookie('hw_token')Token.value = null
}工具類封裝：
// utils/request.ts
import { getToken, delToken } from '@/hooks/useToken'
// import { getUuid } from '@/hooks/useUuid'type CommonObject = Record<string, unknown>// 封裝請求
// 指定后端返回的基本數據類型
export interface ResponseConfig {code: numberdata: CommonObjectmessage: string
}const CodeConfig = {/*** 接口錯誤信息*/// code failCodeFail: 1,// code successCodeSuc: 0,// request param errorCodeParamError: 1001,// account is existCodePhoneExist: 1002,// server internal errorCodeServerError: 1003,// token expiredCodeTokenExpired: 1004,// user not existCodeUserNotExist: 1005,// password errorCodePasswordError: 1006,// article not existCodeArticleNotExist: 2000
}// 參數排序
function sortKey(s1, s2) {if (s1 < s2) {return -1}if (s1 > s2) {return 1}return 0
}
// 參數排序
function getSortObj(originData) {const originKeys = Object.keys(originData)const sortKeys = originKeys.sort(sortKey)const sortObj = sortKeys.reduce((p, n) => {return { ...p, [n]: originData[n] }}, {})return sortObj
}const defaultOption = {// key: () => Math.random(),// lazy: true,// baseURL: process.env.BASE_URL,headers: {Authorization: '',token: '',// ts: (+new Date() / 1000) | 0,// sign: '',// 'Content-Type': 'application/x-www-form-urlencoded',// deviceType: 'pc'}
}const fetch = (url: string, options?: CommonObject): Promise<ResponseConfig> => {const { $router, $config } = useNuxtApp()const reqUrl = $config.public.BASE_URL + urlconst p: CommonObject = {...defaultOption,...options}// 加密參數const originData = options?.body || options?.params || {}const sortData = getSortObj(originData)let paramsData = JSON.stringify(sortData)if (p.method === 'get') {Object.assign(p, { params: sortData })} else {const qsData = JSON.stringify(sortData)Object.assign(p, { body: qsData })paramsData = qsData}
// const encryStr = CryptoJS.MD5(decodeURIComponent(paramsData)).toString()const Token = getToken()Object.assign(p.headers as object, {Authorization: Token ? `Bearer ${Token}` : '',token: Token || '',// ts: (+new Date() / 1000) | 0,// sign: encryStr,// uuid: getUuid()})return new Promise((resolve, reject) => {$fetch(reqUrl, p).then((res) => {const code = (res as ResponseConfig).code || 0if (code === CodeConfig.CodeSuc) {// 成功resolve(res as ResponseConfig)return}if (code === CodeConfig.CodeTokenExpired) {// token過期delToken()$router.replace({ path: '/' })reject(res)return}if (code !== CodeConfig.CodeSuc) {reject(res)return}}).catch((err) => {reject(err)})})
}export default {get<T = ResponseConfig>(url: string, params?: CommonObject): Promise<T> {return fetch(url, { method: 'get', params }) as Promise<T>},post<T = ResponseConfig>(url: string, body?: CommonObject): Promise<T> {return fetch(url, { method: 'post', body }) as Promise<T>},put<T = ResponseConfig>(url: string, body?: CommonObject): Promise<T> {return fetch(url, { method: 'put', body }) as Promise<T>},delete<T = ResponseConfig>(url: string, body?: CommonObject): Promise<T> {return fetch(url, { method: 'delete', body }) as Promise<T>}
}網絡請求組件的介紹
在這個封裝中，定義了四個主要的請求方法：get、post、put和delete。這些方法分別對應于HTTP協議中的GET、POST、PUT和DELETE操作。
get: 用于獲取數據，通常是在URL后面添加查詢參數。post: 用于提交數據到服務器，通常用于創建新資源。put: 用于更新服務器上的數據，通常用于更新現有資源。delete: 用于刪除服務器上的數據，通常用于刪除資源。
結合TypeScript的最佳實踐
為了更好地組織代碼和利用TypeScript的類型系統，建議將網絡請求和響應的結構體定義單獨放在一個文件中，比如types.ts，然后在API文件夾中定義具體的網絡請求接口。
以獲取用戶排行榜接口為例：
定義請求和響應類型
// types.ts
// 定義通用對象類型
type CommonObject = Record<string, unknown>;// 定義獲取用戶榜單的請求和響應類型
// 定義接口參數類型
interface GetUserRankingParams extends CommonObject {limit?: number;types?: number;
}// 定義單個用戶的排行榜數據類型
interface UserRanking {userName: string;nickname: string;avatarName: string;registDate: string;avatarUrl: string;articleCount: number;totalViews: number;totalComments: number;lastPostTime: string;score: number;
}// 定義響應數據類型
interface UserRankingResponse {code: number;msg: string;data: UserRanking[];
}
定義API接口
使用上述定義的類型，可以更清晰地定義API接口。將這些接口放在一個單獨的文件中，比如api/index.ts。
// api/index.ts
import request from '@/utils/request'
import { GetUserRankingParams, UserRankingResponse } from '@/types'/*** 獲取用戶排行榜API接口定義*/
export const getUserRank = (params?: GetUserRankingParams): Promise<UserRankingResponse> => {return request.get('/userRank', params)
}
使用封裝后的API
在NuxtJS的組件或者其他文件中，可以這樣使用封裝后的API接口：
<script setup lang="ts">
import { getUserRank } from '@/api/index'
import { UserRankingResponse } from '@/types'// 使用GET請求獲取數據
const fetchData = async () => {try {const response: UserRankingResponse = await getUserRank({ limit: 10, types: 1 })console.log(response.data)} catch (error) {console.error(error)}
}// 調用相應的方法
fetchData()
</script>
在VUE頁面的詳細使用
<template><div class="footer"><div><div class="qrcode-scan"><img src="@/assets/img/hw_qrcode.jpg" class="qrcode-img"><div class="qrcode-text"><h2 class="qrcode-title">關注堅果派公眾號</h2><p class="qrcode-des">鴻蒙專屬的技術社區</p></div></div><div class="sider-box"><h5 class="common-title">作者榜</h5><div class="content-box"><div><div v-for="user in rankList" :key="user.userName" class="author-item"><img :src="user.avatarUrl+user.avatarName" :alt="user.nickname" width="34" height="34" class="avatar"><NuxtLink :to="`/user/${user.userName}`" class="author-info" target="_blank" rel="noopener noreferrer"><span class="name single-ellipsis">{{ user.nickname }}</span><span class="count single-ellipsis">{{ user.articleCount }}篇文章</span></NuxtLink><a-button class="follow-btn"><span class="normal">關注</span><span class="cancel">取消關注</span></a-button></div></div></div></div></div></div>
</template><script lang="ts" setup>import { getCourselist ,getUserRank} from '~/api'const rankList = ref<UserRanking[]>([]);const fetchUserRanking = async () => {try {const params: GetUserRankingParams = {limit: 7,type: 0};const result: UserRankingResponse = await getUserRank(params);//console.log('User ranking response:', result);if (result.code === 0) {rankList.value = result.data;} else {console.error('用戶排行榜請求失敗，代碼:', result.code, '消息:', result.msg);}} catch (error: any) {console.error('獲取用戶排行榜時發生錯誤:');if (error instanceof Error) {console.error('錯誤信息:', error.message);} else {console.error('未知錯誤:', error);}}
};fetchUserRanking()
</script>
結語
通過上述封裝和最佳實踐，在NuxtJS項目中可以更方便地進行網絡請求，并且能夠集中處理一些通用的邏輯，比如錯誤處理和認證信息的傳遞。將網絡請求和響應類型定義集中放在一個文件中，不僅使得我們的代碼更加整潔，還提高了代碼的可維護性和可讀性。這樣的封裝方式使得我們的項目結構更加清晰，并且易于擴展和維護。希望這篇文章能夠幫助你在NuxtJS項目中實現高效的網絡請求管理。
