前端http请求响应管理利器-axios?fetch?Superagent？

soWhat
752 阅读7分钟

在前端开发中，我们常常需要向服务器发送请求来获取数据或提交数据。为了更好地管理这些请求和响应，我们需要使用一些工具来帮助我们完成这项工作，常用的前端HTTP请求库有以下几个：

  • axios：一个广泛使用的HTTP客户端，它支持Promise API，并且可以拦截请求和响应;
  • fetch：现代浏览器内置的HTTP客户端，它使用Promise API，但不支持请求拦截;
  • Superagent：一个小巧的HTTP客户端，它支持Promise API，可以拦截请求和响应;
  • jQuery Ajax：一个广泛使用的Ajax库，它可以使用Promise API，但不支持请求拦截（是个比较古早的库，本文不作介绍）

下文对axios、superagent、fetch分别作详细的介绍，包括请求发起、拦截、并发、取消等操作

axios

Axios是一个流行的HTTP客户端，它支持Promise API，并且可以拦截请求和响应。它具有良好的文档和社区支持，并且可以用于浏览器和Node.js。使用Axios可以轻松地发起HTTP请求，并处理响应

安装

可以使用npm或yarn来安装axios：

npm install axios
# 或者
yarn add axios

基本用法

可以使用axios来发起HTTP请求，例如：

import axios from 'axios';

// 发起GET请求
axios.get('http://example.com/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发起POST请求
axios.post('http://example.com/api/data', { name: 'example' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，我们使用axios.get和axios.post来发起GET和POST请求，并在响应成功时打印响应数据。如果请求失败，则会在控制台中打印错误信息。

请求拦截器和响应拦截器

可以使用axios的拦截器来拦截请求和响应。例如，可以使用请求拦截器添加请求头：

import axios from 'axios';

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
});

在上述代码中，我们使用axios.interceptors.request.use来添加请求拦截器，并在其中添加Authorization头。

类似地，可以使用响应拦截器来处理响应数据：

import axios from 'axios';

axios.interceptors.response.use(response => {
  if (response.status === 401) {
    redirectToLogin();
  }
  return response;
});

在上述代码中，我们使用axios.interceptors.response.use来添加响应拦截器，并在其中处理401响应码。

并发请求

可以使用axios的axios.all和axios.spread方法来发起并发请求：

import axios from 'axios';

axios.all([
  axios.get('http://example.com/api/data1'),
  axios.get('http://example.com/api/data2'),
])
  .then(axios.spread((response1, response2) => {
    console.log(response1.data, response2.data);
  }))
  .catch(error => {
    console.error(error);
  });

在上述代码中，我们使用axios.all方法来发起两个并发请求，并使用axios.spread方法来处理返回的两个响应。

取消请求

可以使用axios的取消令牌来取消请求。首先，需要创建一个取消令牌：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('http://example.com/api/data', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

在上述代码中，我们使用axios.CancelToken来创建一个取消令牌，并将其传递给请求配置中的cancelToken参数。

然后，可以在需要时调用cancel方法来取消请求：

cancel();

Superagent

Superagent是一个小巧的HTTP客户端，它支持Promise API，可以拦截请求和响应，适用于浏览器和Node.js。它提供了简单易用的API，并且可以扩展到满足特定需求。使用Superagent可以轻松地发起HTTP请求，并处理响应。

安装

可以使用npm或yarn来安装superagent:

npm install superagent
# 或者
yarn add superagent

基本用法

可以使用superagent来发起HTTP请求，例如：

import request from 'superagent';

// 发起GET请求
request.get('http://example.com/api/data')
  .then(response => {
    console.log(response.body);
  })
  .catch(error => {
    console.error(error);
  });

// 发起POST请求
request.post('http://example.com/api/data')
  .send({ name: 'example' })
  .then(response => {
    console.log(response.body);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，我们使用request.get和request.post来发起GET和POST请求，并在响应成功时打印响应数据。如果请求失败，则会在控制台中打印错误信息。

请求拦截器和响应拦截器

可以使用superagent的拦截器来拦截请求和响应。例如，可以使用请求拦截器添加请求头：

import request from 'superagent';

request.interceptors.request.use(request => {
  request.set('Authorization', 'Bearer ' + getToken());
  return request;
});

在上述代码中，我们使用request.interceptors.request.use来添加请求拦截器，并在其中添加Authorization头。

类似地，可以使用响应拦截器来处理响应数据：

import request from 'superagent';

request.interceptors.response.use(response => {
  if (response.status === 401) {
    redirectToLogin();
  }
  return response;
});

在上述代码中，我们使用request.interceptors.response.use来添加响应拦截器，并在其中处理401响应码。

并发请求

可以使用superagent的superagent.Requests#then方法来发起并发请求：

import request from 'superagent';

Promise.all([
  request.get('http://example.com/api/data1'),
  request.get('http://example.com/api/data2'),
])
  .then(responses => {
    console.log(responses[0].body, responses[1].body);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，我们使用Promise.all方法来发起两个并发请求，并使用then方法来处理返回的两个响应。

取消请求

superagent不直接支持取消请求，但可以通过Promise.race和AbortController来实现取消请求的功能。首先，需要创建一个AbortController：

const controller = new AbortController();
const signal = controller.signal;

request.get('http://example.com/api/data', { signal })
  .then(response => {
    console.log(response.body);
  })
  .catch(error => {
    console.error(error);
  });

// 取消请求
controller.abort();

在上述代码中，我们使用request.get方法来发起请求，并将AbortController的signal传递给请求配置中的signal参数。然后，可以在需要时调用AbortController的abort方法来取消请求。

Fetch

Fetch是浏览器内置的一个API，它提供了一种简单、灵活的方式来发送HTTP请求。Fetch使用Promise来处理请求和响应。

发送GET请求

以下是使用Fetch发送GET请求的示例代码：

fetch('/api/user')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们使用fetch函数来发送GET请求，然后使用Promise的then和catch方法来处理响应和错误。在then方法中，我们使用response.json()来将响应转换为JSON格式。

发送POST请求

以下是使用Fetch发送POST请求的示例代码：

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    firstName: 'John',
    lastName: 'Doe'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们使用fetch函数来发送POST请求，并将请求配置传递给第二个参数。然后，我们设置请求方法为POST，设置请求头为JSON格式，将请求体转换为JSON字符串并将其传递给请求体。

发送FormData

以下是使用Fetch发送FormData的示例代码：

const formData = new FormData();
formData.append('firstName', 'John');
formData.append('lastName', 'Doe');

fetch('/api/user', {
  method: 'POST',
  body: formData
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们创建了一个新的FormData对象，并向其添加了两个键值对。然后，我们使用fetch函数来发送POST请求，并将FormData对象作为请求体传递给请求配置。

拦截请求和响应

可以使用Fetch的请求和响应拦截器来拦截请求和响应。以下是一个拦截请求的示例代码：

fetch('/api/user', {
  headers: {
    'Authorization': 'Bearer ' + getToken()
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们使用fetch函数来发送请求，并在请求配置中添加了Authorization头。这个头可以包含我们的令牌或其他验证信息。

以下是一个拦截响应的示例代码：

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中，我们使用fetch函数来发送请求，并在响应处理方法中添加了一个检查。如果响应状态码不是200，我们会抛出一个错误。

取消请求

可以使用AbortController和AbortSignal来取消Fetch请求。以下是一个取消Fetch请求的示例代码：

const controller = new AbortController();
const signal = controller.signal;

fetch('/api/user', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 取消请求
controller.abort();

在这个示例中，我们创建了一个新的AbortController对象，并使用它的signal属性将AbortSignal传递给fetch函数的请求配置。然后，我们可以在需要时调用AbortController对象的abort方法来取消请求。

总结

以上三种工具都是前端http请求响应管理利器，它们都有自己的优缺点，可以根据实际需要来选择使用。Axios使用简单，支持拦截器和全局配置，Superagent支持链式调用，Fetch是浏览器内置的API，体积小，但是不支持请求拦截。在实际开发中，我们可以根据需要选择使用其中的一种或多种工具来管理http请求和响应。

avatar
文章
阅读
粉丝