使用 axios 轻松高效进行 HTTP 请求

2023-01-21 12:42:09

使用 Axios 简化 HTTP 请求：一个全面的指南

基本配置

在现代 Web 开发中，HTTP 请求是必不可少的。Axios 是一个出色的 JavaScript 库，可以简化和优化这一过程。首先，我们需要在项目中安装 axios 库，然后创建 axios 实例并进行基本配置：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json',
  },
});

这个配置设置了 axios 实例的 baseURL、超时时间和默认请求头。这有助于简化代码，避免在每次请求中重复这些设置。

拦截器

拦截器是 axios 中的一项强大功能，它允许我们在请求和响应被发送或接收之前进行拦截和处理。拦截器可以帮助我们添加或修改请求头、处理请求和响应数据、捕获和处理错误，甚至显示加载动画。

我们可以通过以下代码添加拦截器：

instance.interceptors.request.use((config) => {
  // 在请求发送之前做一些事情
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

instance.interceptors.response.use((response) => {
  // 在响应接收之后做一些事情
  return response;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

错误处理

使用 axios 进行 HTTP 请求时，难免会遇到错误。axios 提供了错误处理机制，让我们能够轻松地处理这些错误：

instance.get('/users').catch((error) => {
  // 处理错误
});

通过 try-catch 语句，我们可以捕获并处理这些错误。

REST API 请求

axios 也支持 REST API 请求。我们可以使用以下代码发送 GET、POST、PUT、DELETE 等类型的请求：

instance.get('/users').then((response) => {
  // 处理 GET 请求的响应
});

instance.post('/users', { name: 'John Doe' }).then((response) => {
  // 处理 POST 请求的响应
});

instance.put('/users/1', { name: 'Jane Doe' }).then((response) => {
  // 处理 PUT 请求的响应
});

instance.delete('/users/1').then((response) => {
  // 处理 DELETE 请求的响应
});