NUXT3.0實現網路請求二次封裝

莫頎發表於2023-05-09
UX封裝

?最近在開發基於nuxt3.0的專案，看了官網的網路請求，感覺不太適合，就自己基於官網的useFetch()方法封裝了一個網路請求，下面開始實現封裝。

?第一步：新建http.ts檔案，用於編寫封裝程式碼

我選擇在composables目錄中新建http.ts。composables是官方預設的外掛目錄，官方描述：Nuxt 3使用composables/目錄使用auto-imports自動將Vue組合匯入到應用中!

?封裝程式碼如下：

/**
*  nuxt專案目錄/composables/http.ts
*/
//  基於useFetch()的網路請求封裝

//全域性基礎URL
const BASEURL: string = "http://127.xxx.xxx:3000";  //全域性後臺伺服器請求地址

//定義ts變數型別介面
interface HttpParms {
    baseURL?: string,  //請求的基本URL，即後臺伺服器地址，（若伺服器請求地址只有一個，可不填）
    url: string,      //請求api介面地址
    method?: any,   //請求方法
    query?: any,       //新增查詢搜尋引數到URL
    body?: any         //請求體
}

/**
 * 網路請求方法
 * @param obj 請求引數
 * @returns 響應結果
 */
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 ?? "",
                body: obj?.body ?? "",
                onRequest({ request, options }) {
                    // 設定請求報頭
                    options.headers = options.headers || {}
                    /**如果介面需求攜帶token請求，則可先自行使用官方的useCookie()方法設定Cookie儲存後，再使用useCookie()方法，取出token使用。如下例子：*/
                    //const token = useCookie('token')
                    //@ts-ignore
                    //options.headers.Authorization = token.value
                },
                onRequestError({ request, options, error }) {
                    // 處理請求錯誤
                    console.log("伺服器連結失敗!")
                    reject(error)
                },
                onResponse({ request, response, options }) {
                    // 處理響應資料
                    resolve(response._data)
                },
                onResponseError({ request, response, options }) {
                    // 處理響應錯誤
                }
            },

        )
    })
    return res;

}

?第二步：呼叫封裝

接下來在test.vue中呼叫封裝，如下程式碼：

<template>
    <div>
        測試頁面
    </div>
    <button @click="btn()">請求測試按鈕</button>
</template>

<script setup lang="ts">
//引入http.ts封裝的網路請求方法
import { http } from '~/composables/http';

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

</script>

?第三步：成功！！！接下來就可以看到請求結果了，我們可以開啟控制檯檢視：

至此，我們的nuxt3.0網路請求的簡單封裝就實現啦???！

???在這裡給在nuxt3.0專案中使用ts的小夥伴一個小提示，注意整個專案中不要使用中文路徑哦~記住是完整專案路徑都不要有中文！否則會報錯！

相關文章