NuxtJS中网络请求模块的封装与最佳实战

在网络开发中，封装一个简洁、高效的网络请求模块对于项目的可维护性和扩展性至关重要。本文将详细介绍如何在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项目中实现高效的网络请求管理。