【Nuxt】发送请求

概述

以下方式只能在 setup / 生命周期钩子 里面使用。

useFetch

基本使用

下面的 API / hooks 具体用法查看官网文档。

const BASE_URL = 'http://codercba.com:9060/juanpi/api';

// 1. $fetch  server and client
// $fetch(BASE_URL + '/homeInfo', {
//   method: 'GET'
// }).then(res => {
//   console.log(res)
// })

// 2. useAsyncData 在刷新页面时减少客户端发送的一次请求 只在 server 端发送请求
// interface HomeInfo {
//   code: number
//   data: any
// }
// const {data} = await useAsyncData<HomeInfo>('homeInfo', () => {
//   return $fetch(BASE_URL + '/homeInfo', {
//     method: 'GET'
//   })
// })
// console.log(data.value)

// 3. useAsyncData 的简写 useFetch
// const {data: dataInfo} = await useFetch(BASE_URL + '/homeInfo', {method: 'GET'});
// console.log(dataInfo.value)

// 3.1 拦截器
const {data: dataInfo} = await useFetch(BASE_URL + '/goods', {
  method: 'POST',
  // 请求拦截器
  onRequest({request, options}) {
    options.headers = {
      token: '123456'
    }
  },
  // 请求错误的拦截
  onRequestError({request, options, error}) {
    // console.log(context.error)
    console.log(error)
  },
  onResponse(context) {
    if (context.response.status === 401) {
      // 未登录
    }
  },
  onResponseError(context) {
    if (context.response.status === 401) {
      // 未登录
    }
  }
})
console.log(dataInfo.value)

const count = ref();
// 刷新 客户端不发送请求 服务端发送请求 水合后客户端可以获取请求后的数据
const {data, refresh, pending} = await useFetch(BASE_URL + '/homeInfo', {
  method: 'GET',
  body: {
    count: count
  }
});
function refreshPage() {
  // 响应式数据变化或者直接调 refresh() 都可以触发客户端的发送请求（刷新请求）
  // refresh();
  count.value++
}

封装 useFetch

// import type { AsyncData, UseFetchOptions } from 'nuxt/dist/app/composables'
import type {AsyncData, UseFetchOptions} from "#app";

const BASE_URL = 'http://codercba.com:9060/oppo-nuxt/api/'
type Methods = 'GET' | 'POST'

export interface IResultData<T> {
    code: number
    data: T
}

class MYRequest {
    request<T = any>(
        url: string,
        method: Methods,
        data?: any,
        options?: UseFetchOptions<T>
    ): Promise<AsyncData<T, Error>> {
        return new Promise((resolve, reject) => {
            const newOptions: UseFetchOptions<T> = {
                baseURL: BASE_URL,
                method: method,
                ...options
            }
            if (method === 'GET') {
                newOptions.query = data
            }
            if (method === 'POST') {
                newOptions.body = data
            }
            useFetch<T>(url, newOptions as any)
                .then((res) => {
                    resolve(res as AsyncData<T, Error>)
                })
                .catch((error) => {
                    reject(error)
                })
        })
    }

    get<T = any>(url: string, params?: any, options?: UseFetchOptions<T>) {
        return this.request<T>(url, 'GET', params, options)
    }

    post<T = any>(url: string, data?: any, options?: UseFetchOptions<T>) {
        return this.request<T>(url, 'POST', data, options)
    }
}

export default new MYRequest()

export const getHomeInfoAPI = (type: HomeInfoDataType) => {
  return myRequest.get<IResultData<IHomeInfo>>('/home/info', {
    type: type || 'oppo'
  })
}

useLazyFetch

const BASE_URL = 'http://codercba.com:9060/juanpi/api';

// // useFetch 默认会阻塞页面的导航 lazy 可以设置成 true 让其变成懒加载(不阻塞)
// const {data} = await useFetch(BASE_URL + '/homeInfo', {method: 'GET', lazy: true});
// // 确保可以获取 data
// watch(data, (newVal) => {
//   console.log(newVal)
// })

// 以上代码可以简化为
const {data} = await useLazyFetch(BASE_URL + '/homeInfo', {method: 'GET'});

onMounted(() => {
  console.log(data?.value)
})

useFetch vs axios