??最近在開發(fā)基于nuxt3.0的項(xiàng)目，看了官網(wǎng)的網(wǎng)絡(luò)請(qǐng)求，感覺不太適合，就自己基于官網(wǎng)的useFetch()方法封裝了一個(gè)網(wǎng)絡(luò)請(qǐng)求，下面開始實(shí)現(xiàn)封裝。

??第一步：新建http.ts文件，用于編寫封裝代碼

我選擇在composables目錄中新建http.ts。composables是官方默認(rèn)的插件目錄，官方描述：Nuxt 3使用composables/目錄使用auto-imports自動(dòng)將Vue組合導(dǎo)入到應(yīng)用中!

??封裝代碼如下：

/**
*  nuxt項(xiàng)目目錄/composables/http.ts
*/
//  基于useFetch()的網(wǎng)絡(luò)請(qǐng)求封裝

//全局基礎(chǔ)URL
const BASEURL: string = "http://127.xxx.xxx:3000";  //全局后臺(tái)服務(wù)器請(qǐng)求地址

//定義ts變量類型接口
interface HttpParms {
    baseURL?: string,  //請(qǐng)求的基本URL，即后臺(tái)服務(wù)器地址，（若服務(wù)器請(qǐng)求地址只有一個(gè)，可不填）
    url: string,      //請(qǐng)求api接口地址
    method?: any,   //請(qǐng)求方法
    query?: any,       //添加查詢搜索參數(shù)到URL
    body?: any         //請(qǐng)求體
}

/**
 * 網(wǎng)絡(luò)請(qǐng)求方法
 * @param obj 請(qǐng)求參數(shù)
 * @returns 響應(yīng)結(jié)果
 */
export const http = (obj: HttpParms) => {
    const res = new Promise<void>((resolve, reject) => {
        useFetch(
            (obj.baseURL ?? BASEURL) + obj.url,
            {
                method: obj.method ?? "GET",
                query: obj?.query ?? null,
                body: obj?.body ?? null,
                onRequest({ request, options }) {
                    // 設(shè)置請(qǐng)求報(bào)頭
                    options.headers = options.headers || {}
                    /**如果接口需求攜帶token請(qǐng)求，則可先自行使用官方的useCookie()方法設(shè)置Cookie存儲(chǔ)后，再使用useCookie()方法，取出token使用。如下例子：*/
                    //const token = useCookie('token')
                    //@ts-ignore
                    //options.headers.Authorization = token.value||null
                },
                onRequestError({ request, options, error }) {
                    // 處理請(qǐng)求錯(cuò)誤
                    console.log("服務(wù)器鏈接失敗!")
                    reject(error)
                },
                onResponse({ request, response, options }) {
                    // 處理響應(yīng)數(shù)據(jù)
                    resolve(response._data)
                },
                onResponseError({ request, response, options }) {
                    // 處理響應(yīng)錯(cuò)誤
                }
            },

        )
    })
    return res;

}

??第二步：調(diào)用封裝

接下來在test.vue中調(diào)用封裝，如下代碼：

<template>
    <div>
        測(cè)試頁(yè)面
    </div>
    <button @click="btn()">請(qǐng)求測(cè)試按鈕</button>
</template>

<script setup lang="ts">
//引入http.ts封裝的網(wǎng)絡(luò)請(qǐng)求方法
import { http } from '~/composables/http';

const btn = async () => {
    //定義請(qǐng)求參數(shù)
    const obj = {
        method: "POST",
        url: '/user/login',
        //"POST"方法傳參:
        body: {
            name: "測(cè)試",
            phone: "176xxxxxx1",
            password: "test123",
        },
        //"GET"方法URL傳參:
        // query: {
        //     name:"test"
        // }
    }
    //開始請(qǐng)求
    let res = await http(obj)
    console.log("請(qǐng)求結(jié)果：", res);
}

</script>

??第三步：成功?。?！接下來就可以看到請(qǐng)求結(jié)果了，我們可以打開控制臺(tái)查看：

至此，我們的nuxt3.0網(wǎng)絡(luò)請(qǐng)求的簡(jiǎn)單封裝就實(shí)現(xiàn)啦??????！

??????在這里給在nuxt3.0項(xiàng)目中使用ts的小伙伴一個(gè)小提示，注意整個(gè)項(xiàng)目中不要使用中文路徑哦~記住是完整項(xiàng)目路徑都不要有中文！否則會(huì)報(bào)錯(cuò)！文章來源地址http://www.zghlxwxcb.cn/news/detail-437317.html

到了這里，關(guān)于NUXT3.0實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求二次封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！