Nuxt3请求封装数据获取详解

一、与传统方式不同，Nuxt3内置了四种请求方式
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<any>  => {
    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<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 })
    }
}

三、新建一个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)
}

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

<template>
    <h3>你好</h3>
</template>
 
<script setup lang="ts">
 //按需引入
import { ref, reactive, onMounted, getCurrentInstance }  from 'vue'
 //引入 api中对应的接口请求
import {config1,config2} from "../utils/api"
 
interface ArrayList {
    banner: object
}
const state:ArrayList = reactive({
        banner:[],
})
 
//config1
config1('').then(res => {
  state.banner = res.value.data.listlunbos
}).catch((err)=>{
  console.log(err)
})
 
//config2
const data = {}
config2(data).then((res) => {
  if(res.value.code == 200){
    state.cooporationTost = false
    ElMessage({
      message: '我们会第一时间与您联系',
      type: 'success',
    })
  }else{
    ElMessage({
      message: res.value.data.message,
      type: 'success',
    })
  }
}).catch((err) => {
  console.log(err)
})
 
</script>
 
<style scoped>
 
</style><template>
    <h3>你好</h3>
</template>
 
<script setup lang="ts">
 //按需引入
import { ref, reactive, onMounted, getCurrentInstance }  from 'vue'
 //引入 api中对应的接口请求
import {config1,config2} from "../utils/api"
 
interface ArrayList {
    banner: object
}
const state:ArrayList = reactive({
        banner:[],
})
 
//config1
config1('').then(res => {
  state.banner = res.value.data.listlunbos
}).catch((err)=>{
  console.log(err)
})
 
//config2
const data = {}
config2(data).then((res) => {
  if(res.value.code == 200){
    state.cooporationTost = false
    ElMessage({
      message: '我们会第一时间与您联系',
      type: 'success',
    })
  }else{
    ElMessage({
      message: res.value.data.message,
      type: 'success',
    })
  }
}).catch((err) => {
  console.log(err)
})
 
</script>
 
<style scoped>
 
</style>