封装接口请求及反向代理

Mr.Liu大约 2 分钟

封装接口请求及反向代理

反向代理配置

官网文档里虽然没有明确说明接口访问代理如何配置。但提供了配置nitro的入口。由于nuxt3内置使用的是nitro服务器，所以配置代理的话需要查看nitro的官方文档

export default defineNuxtConfig({
    // 配置代理
    nitro: {
        devProxy: {
            "/api": {
                '/proxy/test': 'http://localhost:3001',
                '/proxy/example': { target: 'https://example.com', changeOrigin: true }
            }

        }
    },
})

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

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

// 封装请求
import { ElMessage } from 'element-plus'

const fetch = (url: string, options?: any): Promise<any> => {
    const token = useCookie("token");
    const headers = { // headers信息
        'Authorization': `Bearer ${token.value}`
    }
    const { public: { baseUrl } } = useRuntimeConfig()
    const reqUrl = baseUrl + url
    return new Promise((resolve, reject) => {
        useFetch(reqUrl, { ...options, headers }).then(({ data }: any) => {
            const value = data.value
            if (!data._rawValue) {
                // 这里处理错误回调
                reject(value)
            } else if (data._rawValue.code !== '0') {
                ElMessage({
                    message: data._rawValue.msg,
                    type: 'error',
                })
            } else {
                console.log('40data', data._rawValue)
                resolve(ref(data))
            }
        }).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 })
    }
}

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

import Http from '@/utils/request'
 
export const config1 = (params: any) => {
    return Http.get('/m-staff-center/api/v1/pageList', params)
}
export const getVideoList = (params: any) => {
    return Http.post('/m-staff-center/api/v1/getName', params)
}

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

<template>
    <div>
        <button @click="onEventClick()"> 接口请求 </button>
    </div>
</template>
 
<script setup lang="ts">
import { config1 } from '@/api/index';

// 不使用layout布局功能
definePageMeta({
    layout: false
})
const onEventClick = () => {
    config1('').then((res: any) => {
        console.log('请求成功')
    }).catch((err: any) => {
        console.log('请求失败')
    })
}
</script>
 
<style scoped></style>