真正封装实现api的request方法，而不是封装axios

2023-12-31 12:00:15

作为一名前端工程师，我们每天都需要与API打交道，因此我们有必要优化我们的API请求方式。我们通常会使用一些第三方库来封装API请求，如Axios。但有时我们也会需要自己封装实现API请求的方法。

封装实现API请求方法的好处

提高代码的可读性和可维护性 ：将API请求的代码封装成一个独立的方法，可以使我们的代码更加整洁和易于维护。
提高代码的复用性 ：我们可以将封装好的API请求方法在不同的项目中复用，从而提高开发效率。
提高代码的性能 ：自己封装的API请求方法可以更加高效，因为我们可以根据自己的需求来定制请求的细节。

如何使用TypeScript编写自己的API请求方法

使用TypeScript编写自己的API请求方法很简单。我们可以使用fetch()函数来发送请求，然后使用then()方法来处理响应。

async function request(url: string, options?: RequestInit): Promise<Response> {
  return fetch(url, options).then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response;
  });
}

request方法与Axios库的性能比较

我们使用以下代码来比较request方法与Axios库的性能：

const axios = require('axios');

async function benchmark(method: string) {
  const start = Date.now();
  for (let i = 0; i < 1000; i++) {
    if (method === 'request') {
      await request('https://example.com');
    } else if (method === 'axios') {
      await axios.get('https://example.com');
    }
  }
  const end = Date.now();
  console.log(`${method} took ${end - start}ms`);
}

benchmark('request');
benchmark('axios');