如何创建 fetch 函数 - TypeScript

在 TypeScript 中，创建 fetch 函数有两种常见的方式：使用内置的 fetch 函数或者使用第三方库 axios。

使用 fetch 函数

使用内置的 fetch 函数可以直接发起 HTTP 请求，返回一个 Promise 对象，然后可以使用 async/await 语法等待并处理返回结果。

// 发起 GET 请求
async function fetchData(url: string) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

// 使用上面的函数获取数据
const data = await fetchData('https://jsonplaceholder.typicode.com/todos/1');
console.log(data);

上面的代码中，fetchData 函数接收一个 url 参数，然后使用 fetch 函数发起 GET 请求，并等待它返回数据。最终将获取到的数据以 Promise 对象形式返回。

使用 axios 库

axios 是一种常用的 HTTP 请求封装库，适用于浏览器和 Node.js 环境。安装 axios 可以使用 npm 或者 yarn 命令：

npm install axios

# 或者

yarn add axios

安装完成后，可以使用 axios 创建一个 fetch 函数：

import axios from 'axios';

async function fetchData(url: string) {
  const response = await axios.get(url);
  return response.data;
}

// 使用上面的函数获取数据
const data = await fetchData('https://jsonplaceholder.typicode.com/todos/1');
console.log(data);

在这个示例中，我们使用 axios 创建了一个 fetch 函数，它返回一个 Promise 对象。使用 async/await 语法等待并处理返回结果。

总结

无论你选择使用内置的 fetch 函数还是 axios 库，创建 fetch 函数的过程都十分简单。只要了解了 HTTP 请求的基础知识和 TypeScript 的语法，你就可以轻松地创建自己的 fetch 函数了。