提升开发效率：Nuxt 3中使用TypeScript封装useFetch的最佳实践

目录

引言 

正文

具体实现

创建 client.ts 文件进行请求封装

创建 apiError.ts 文件处理错误

编写具体的接口请求方法

补充：配置环境变量

创建.env 文件添加配置

在 nuxt.config.ts 中配置环境变量 

在代码中获取环境变量

小结

---

 

引言 

在现代 Web 开发中，高效地进行数据请求是构建强大应用的关键一环。今天，我们将深入探讨 Nuxt 3 框架中useFetch在服务端如何请求接口。本文以 TypeScript 为例展开讲解，使用 JavaScript 的小伙伴也可根据实际情况轻松进行调整。希望通过本篇博客，能为大家在 Nuxt 3 开发中处理服务端接口请求提供清晰的思路与实用的方法，当然，内容仅供参考，实际应用可根据项目需求灵活变化。

正文

具体实现

在开始构建接口请求逻辑之前，我们先明确一下整体的设计思路。为了实现代码的高可维护性和复用性，我们将对useFetch请求接口进行封装。这一过程中，我们会创建相关文件，分别处理请求的配置、错误处理以及具体的请求方法。

创建 client.ts 文件进行请求封装

首先，在项目的utils目录下创建一个名为client.ts的文件。这个文件的主要职责是封装useFetch请求接口，通过统一管理请求配置、错误处理等逻辑，为后续的接口调用提供便利。

在client.ts文件中，我们先引入错误处理模块，接着，定义后端返回的数据格式规范，使用 TypeScript 的接口来明确数据结构，这有助于在开发过程中进行类型检查，提前发现潜在错误，然后，封装核心的fetch函数，这个函数接收请求的 URL 和一些可选配置。在函数内部，我们首先获取运行时配置，从中提取出基础域名，用于拼接完整的请求地址， 最后通过一个类来进一步封装常见的 HTTP 请求方法，如GET、POST、PUT、DELETE，使调用更加简洁明了，以下是具体实现代码：

import { doError } from './apiError'

// 这里是规定后端返回的数据格式规范
export interface ResOptions<T> {
    data?: T
    code?: number
    msg?: string
}

const fetch = (url: string, options?: any): Promise<any> => {
    const config = useRuntimeConfig()
    // 获取配置域名
    let baseUrl = config.public.apiUrlInternal
    // 拼接请求地址
    const reqUrl = baseUrl + url
    return new Promise((resolve, reject) => {
        useFetch(reqUrl, { ...options }).then(({ data, error }: any) => {
            const value: ResOptions<any> = data.value
            resolve(value)
            // 判断是否有错误产生
            if (error.value) {
                doError(error.value?.statusCode, reqUrl)
                reject(error.value)
            }else{
                resolve(ref(value).value)
            }  
        }).catch((err: any) => {
            // 接口请求异常的操作写在这里
            console.log(err)
            reject(err)
        })
    })
}

export default new class Http {

    get(url: string, params?: any): Promise<any> {
        return fetch(url, { method: 'get', params })
    }

    post(url: string, params?: any): Promise<any> {
        return fetch(url, { method: 'post', params })
    }

    put(url: string, body?: any): Promise<any> {
        return fetch(url, { method: 'put', body })
    }

    delete(url: string, body?: any): Promise<any> {
        return fetch(url, { method: 'delete', body })
    }
}

创建 apiError.ts 文件处理错误

为了更好地处理 API 请求中的错误，我们需要在utils目录下创建一个apiError.ts文件，用于封装错误码及其对应的处理逻辑。这样，在接口请求出现异常时，我们能够有针对性地进行处理，提升用户体验。

在apiError.ts文件中，定义doError函数，根据不同的错误码设置相应的错误信息，同时定义setError函数，该函数使用createError来抛出带有详细信息的错误，方便在调用栈中进行错误追踪，以下是具体实现代码：

export const doError = (error: number, reqUrl: string) => {
        // 这里规定一些异常码所代表的意义
        if (error === 404) {
            setError(401,reqUrl,'数据不存在')
        } else if (error === 403) {
            setError(403,reqUrl,'无权限访问')
        } else if (error >= 500) {
            setError(error,reqUrl,'服务器内部错误')
        } else if (error === 0) {
            setError(0,reqUrl,'网络错误')
        }

}

const setError = (error: number, statusMessage: string, message: string) => {
    throw createError({
                    statusCode: error,
                    statusMessage,
                    message,
                })
}

编写具体的接口请求方法

接下来，我们可以基于上述封装好的工具类来编写具体的接口请求方法。以根据标签code获取标签名字为例： 

import Http from '~~/utils/client'


/**
 * 根据标签code获取标签名字
 * @param code 标签code
 * @returns 
 */
export const getLabelNameByCode = async (code: string):Promise<string> => {
    return await Http.get('api-app/tag/getByCode', {code: code})
}

补充：配置环境变量

为了使我们的应用更加灵活，能够适应不同的部署环境，我们可以通过环境变量来配置不同的 API 请求地址。这一操作主要分为以下几个步骤：

创建.env 文件添加配置

首先，在项目根目录下创建一个.env文件，并添加如下内容：

# 服务端API请求地址
NUXT_PUBLIC_API_URL_INTERNAL=http://xxxx.xxxx.com

# 客户端API请求域名，用户浏览器端发起请求(这里不要加http前缀，因为要同时适配http/https)
NUXT_PUBLIC_API_URL_PUBLIC=//xxxx.xxxx.com

这里的NUXT_PUBLIC_API_URL_INTERNAL用于配置服务端请求的基础 URL，而NUXT_PUBLIC_API_URL_PUBLIC则用于客户端在浏览器端发起请求时的基础域名。

在 nuxt.config.ts 中配置环境变量 

然后在nuxt.config.ts里，需要将.env文件中定义的环境变量名与代码中使用的变量名进行对应配置。这里要特别注意命名的一致性，例如，如果在.env文件中定义了NUXT_PUBLIC_API_URL_PUBLIC，那么在nuxt.config.ts中需要将其对应到代码中使用的变量名，如apiUrlPublic。具体配置方式可能因项目而异，一般会在相关的配置对象中进行设置：

export default defineNuxtConfig({
    // 其他配置项...
    runtimeConfig: {
        public: {
            apiUrlInternal: process.env.NUXT_PUBLIC_API_URL_INTERNAL,
            apiUrlPublic: process.env.NUXT_PUBLIC_API_URL_PUBLIC
        }
    }
});

在代码中获取环境变量

最后，在代码中可以通过以下方式获取环境变量： 

const config = useRuntimeConfig()
const baseUrl = config.public.apiUrlInternal

通过上述步骤，我们实现了通过环境变量来灵活配置 API 请求地址，使得应用在不同环境下能够轻松切换请求的目标服务器。

小结

通过本文的介绍，我们全面学习了如何在 Nuxt 3 中使用useFetch进行服务端接口请求。从封装请求、处理错误到配置环境变量，每一个环节都紧密相扣，共同构成了一个高效、可维护的接口请求体系。希望这篇文章能够帮助大家更好地理解和应用这些技术，在实际项目中显著提升开发效率。如果在阅读或实践过程中有任何问题或建议，欢迎留言讨论，让我们一起在技术的道路上不断探索前行！