TypeScript:
发出 HTTP 请求

How to: 怎么做?

在TypeScript中,常用fetch函数发送HTTP请求。下面是个例子,我们从一个JSON占位符服务中获取数据。

// TypeScript 示例:发送 GET 请求来获取数据
async function getData(url: string): Promise<any> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Fetching data failed:', error);
  }
}

// 使用示例
const url = 'https://jsonplaceholder.typicode.com/todos/1';
getData(url).then(data => console.log(data));

// 输出样例:
// {
//   userId: 1,
//   id: 1,
//   title: 'delectus aut autem',
//   completed: false
// }

Deep Dive 深入探究

早期,发送HTTP请求用的是XMLHttpRequest对象。它复杂,用起来繁琐。后来,Fetch API出现了,它基于Promise,语法更简洁,使用更方便。

现在有几种方式发送HTTP请求:

  • Fetch API(现代、简单)
  • XMLHttpRequest(老式、复杂)
  • 第三方库,如Axios(功能强大、可定制性高)

在具体实现中,可能要处理跨域问题(CORS)、认证和安全性等问题。根据请求的类型(GET、POST、PUT、DELETE等),发送参数和数据处理方式也有所不同。

See Also 查阅更多