如何让axios助力前端项目

2023-10-07 03:45:55

项目中 axios 的常见应用

现代前端项目中，发送请求是必不可少的。而说到发送请求，就不得不提 axios。axios 是一个基于 Promise 的 HTTP 库，可以轻松地发送异步 HTTP 请求。

如何使用 axios

axios 的使用非常简单，只需要引入 axios 库，然后就可以直接使用它发送请求了。

import axios from 'axios';

axios.get('/api/v1/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

上面的代码中，我们使用 axios 的 get 方法发送了一个 GET 请求到 /api/v1/users 路由。如果请求成功，我们会在控制台看到响应的数据。如果请求失败，我们会在控制台看到错误信息。

axios 的配置

axios 支持多种配置选项，可以帮助我们定制请求的行为。例如，我们可以设置超时时间、请求头、响应类型等等。

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.get('/api/v1/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

上面的代码中，我们创建了一个 axios 实例，并设置了 baseURL、timeout 和 headers 等配置选项。然后，我们使用这个 axios 实例发送了一个 GET 请求到 /api/v1/users 路由。

axios 的拦截器

axios 支持拦截器，可以让我们在请求发送之前或响应返回之后做一些事情。例如，我们可以使用拦截器来添加认证信息、处理响应数据等等。

axios.interceptors.request.use((config) => {
  config.headers['Authorization'] = `Bearer ${token}`;
  return config;
});

axios.interceptors.response.use((response) => {
  return response.data;
});

上面的代码中，我们使用 axios 的拦截器来添加认证信息和处理响应数据。我们使用 request 拦截器在请求发送之前向请求头中添加 Authorization 字段，并使用 response 拦截器在响应返回之后返回响应数据。