一、与传统方式不同，Nuxt3内置了四种请求方式，想了解axios接口封装 点我

1、useFetch

2、useLazyFetch

3、useAsyncData

4、useLazyAsyncData

注意：1、useFetch 和 useLazyFetch，useAsyncData和useLazyAsyncData 区别，服务端渲染的时候，这两个没差别，在客户端渲染的时候，useLazyFetch 相当于请求是数据是 suspense 的，而 useLazyFetch 一定要全部请求完毕，才进行路由内容的显示。2、我们更多使用的是useAsyncData和useFetch

二、为了方便我管理，来封装一个 useFetch 请求,新建utils/request.ts

import { _AsyncData } from 'nuxt3/dist/app/composables/asyncData'
//import baseUrl from './baseUrl'
import { ElMessage } from 'element-plus'

let baseUrl = ''
// 指定后端返回的基本数据类型
export interface ResponseConfig {
    code: number,
    status: number,
    data: any,
    msg: string
}
export interface ValueConfig {
    value: any,

}

const fetch = (url: string, options?: any): Promise  => {
    const reqUrl = baseUrl + url
    return new Promise((resolve, reject) => {
        useFetch(reqUrl, { ...options }).then(({ data, error }: _AsyncData) => {
            if (error.value) {
                reject(error.value)
                return
            }
            const value = data.value
            if (!value) {
                // 这里处理错误回调
                // reject(value)
                // $router.replace('/reject/' + value.status)
            }else if(value.code == 102){
                ElMessage({
                    message: value.msg,
                    type: 'error',
                })
            } else {
                resolve(ref(value))
            }
        }).catch((err: any) => {
            reject(err)
        })
    })
}

export default new class Http {

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

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

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

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

三、新建一个API管理文件，utils/api.ts

import Http from '@/utils/http'

export const config1 = (params?) => {
    return Http.get('接口地址', params)
}

export const config2 = (params?) => {
    return Http.post('接口地址', params)
}

四、在页面中使用，例如：