Nuxt3服务端渲染(SSR)请求封装方-法二

之前写的一个Nuxt请求封装使用defineEventHandler的方式是来自官方文档的一个简单的封装，可能使用起来也不是很熟悉，现在换一个种写法。

useFetch 请求封装

本项目没有配置在线接口，可根据自己需要更换 baseUrl，文末提供的有部署后的地址，可以看到接口数据。

新建 utils/request.ts

// utils/request.ts

//import baseUrl from './baseUrl'
import { ElMessage } from 'element-plus'
 
const baseUrl = 'xxxxxx'
// 指定后端返回的基本数据类型
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 }: any) => {
            if (error.value) {
                reject(error.value)
                return
            }
            const value = data.value
            if (!value) {
                // 这里处理错误回调
                // reject(value)
                // $router.replace('/reject/' + value.status)
            }else if(value.status == 200){
                resolve(value)
            } else {
              ElMessage({
                  message: value.msg,
                  type: 'error',
              })
            }
        }).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管理

新建server/api/index.ts

import Http from '@/utils/request'
 
/**
   * 获取首页数据
   */
export const homeInit = (params?: any) => {
  return Http.get('api/blog/init', params)
}

请求使用

在pages/index.vue中例子：

<template>
  <div>
   
    <div>接口数据 start</div>
    <br>
    <div v-for="item in data?.tagList" :key="item.id"> {{ item.title }}</div>
    <br>
    <div>接口数据 end</div>
 
  </div>
</template>
<script setup>
// import { homeInit } from '@/server/api/index'
// const { data, status } = await homeInit()
const { data, status } = { data: { tagList: [{ id: 1, title: '接口演示' }] } }
</script>