vue3 fetch请求接口

在Vue 3中，fetch API是一种现代的JavaScript内置API，用于从服务器获取资源或发送数据。与axios类似，fetch也被广泛用于构建异步Web应用。以下是使用fetch进行请求的基本步骤：

1. 导入fetch：在Vue组件中，首先需要导入fetch，它是window对象的一部分，不需要额外安装依赖。

import fetch from 'isomorphic-unfetch';

注意这里使用`isomorphic-unfetch`是为了提供跨环境支持（例如Node.js环境下的服务器端渲染）。

2. 发起请求：创建一个新的Promise来执行fetch请求，传入URL作为参数。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    // 根据不同的HTTP状态码处理请求结果
    if (response.ok) {
      const data = await response.json(); // 对JSON格式的数据进行解码
      return data;
    } else {
      throw new Error(`Request failed with status ${response.status}`);
    }
  } catch (error) {
    console.error(error);
    return null; // 或者抛出错误给上层处理
  }
}

3. 调用请求：在需要使用的地方，调用`fetchData`函数，并监听其返回值。

const result = await fetchData('/api/data');
console.log(result); // 输出获取到的数据