加载中...

nuxt3:http请求时需要注意得一些地方

前言

nuxt3 中获取后端数据总共有三个方法:

  1. useFetch()
  2. $fetch()
  3. useAsynData()

本篇教程就针对这三个方法的使用注意事项做一个记录

正文

  1. 通过useFetch()方法请求这个动作,在首次加载时,只在服务端执行一次,客户端是不执行得,客户端是直接使用拿到的数据地;
  2. 如果和SEO无关得数据,优先使用 $fetch() 函数获取数据
  3. useFetch() 方法可以配置仅在客户端执行请求,只需要给请求的配置参数中添加 server:false即可
const {data} = await useFetch('/api', {server:false})
  1. 【重要】如果通过useFetch() 获取数据时,服务端和客户端两端传递得参数必须相同,如果不相同,客户端会再次获取数据(相当于是二次请求)
  2. 参数不相同情况举例:比如请求时,需要传递一个客户端本地存储的用户ID,这时候,服务端在发送请求时,因为在node环境中,拿不到 localstroge 相关得数据,但是到客户端时,又能拿到数据了,这时候,客户端就会再次异步去请求一次api
  3. 客户端再次异步请求数据时,第一时间是拿不到返回的data的,这时候可以通过 watch 函数去监听data变化,然后在watch的回调函数中获取数据。
  4. 上面这种情况针对 useFetch 仅在客户端执行 同样重要,因为仅在客户端执行的useFetch()也有同样的问题,既如果参数变化,必须通过 watch 来获取数据
  const storeUser = useStoreUser(); // 这个是pinia 中存储变量,pinia 数据做了持久化存储,都保存到了localStroge 中
  const lUserId = storeUser.getUserId();

  const { data } = await http.get('/shop/user/get', {
      params: { userId: lUserId },
      server: false
  });
  // 这里如果直接拿data会返回null,必须通过 watch 监听才能拿到数据
  watch(data, n => {
      if (unref(n).code === 10000) {
          storeUser.setUserId(unref(n).result.id + '');
          storeUser.userSD = unref(n).result.sd;
      }
  });
posted @ 2024-01-23 20:28  水车  阅读(218)  评论(0编辑  收藏  举报