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