useFetch 方法

使用一个与 SSR 兼容的可组合函数从 API 端点获取数据。

用法

普通版

<!-- pages/index.vue-->
<script setup>
  const route = useRoute()

  const { data, pending, error, refresh } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`, {
    pick: ['title']
  })
</script>

参数版

使用 query 选项，您可以向查询中添加搜索参数。

const param1 = ref("value1");
const { data, pending, error, refresh } = await useFetch(
  "https://api.nuxtjs.dev/mountains",
  {
    query: { param1, param2: "value2" },
  }
);

拦截

const { data, pending, error, refresh } = await useFetch("/api/auth/login", {
  onRequest({ request, options }) {
    // 设置请求头
    options.headers = options.headers || {};
    options.headers.authorization = "...";
  },
  onRequestError({ request, options, error }) {
    // 处理请求错误
  },
  onResponse({ request, response, options }) {
    // 处理响应数据
    localStorage.setItem("token", response._data.token);
  },
  onResponseError({ request, response, options }) {
    // 处理响应错误
  },
});

参数

URL：

要获取的 URL。

Options（扩展自 unjs/ofetch 选项和 AsyncDataOptions）：

• method：请求方法。

• query：使用 ufo 将查询搜索参数添加到 URL。

• params：query 的别名。

• body：请求体 - 自动转换为字符串（如果传递的是对象）。

• headers：请求头。

• baseURL：请求的基本 URL。

返回值

• data：传入的异步函数的结果。

• pending：一个布尔值，指示数据是否仍在获取中。

• refresh/execute：一个可以用于刷新 handler 函数返回的数据的函数。

• error：如果数据获取失败，则为错误对象。

• status：表示数据请求的状态的字符串（"idle"、"pending"、"success"、"error"）。