📅  最后修改于: 2023-12-03 15:08:28.113000             🧑  作者: Mango
在 TypeScript 中,创建 fetch 函数有两种常见的方式:使用内置的 fetch 函数或者使用第三方库 axios。
使用内置的 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 是一种常用的 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 函数了。