概述

以下方式只能在 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++
}

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