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})

4. 【重要】如果通过useFetch() 获取数据时，服务端和客户端两端传递得参数必须相同，如果不相同，客户端会再次获取数据(相当于是二次请求）
5. 参数不相同情况举例：比如请求时，需要传递一个客户端本地存储的用户ID，这时候，服务端在发送请求时，因为在node环境中，拿不到 localstroge 相关得数据，但是到客户端时，又能拿到数据了，这时候，客户端就会再次异步去请求一次api
6. 客户端再次异步请求数据时，第一时间是拿不到返回的data的，这时候可以通过 watch 函数去监听data变化，然后在watch的回调函数中获取数据。
7. 上面这种情况针对 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;
      }
  });

博客中所涉及到的图片都有版权，请谨慎使用