React 中使用 Axios 的常见配置指南

前端

2023-12-11 09:07:01

前言

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。它具有以下特点：

易于使用
灵活
可扩展
支持所有浏览器和 node.js
文档齐全

Axios 请求的常见配置

Axios 提供了许多配置选项，允许你对请求进行自定义。这些配置选项可以让你更好地控制请求的行为，并根据你的需要进行调整。

以下是一些最常用的 Axios 配置选项：

baseURL：基准 URL，所有请求都会从此 URL 开始。
headers：请求头，用于携带一些附加信息，如身份验证凭证或内容类型。
data：请求数据，用于向服务器发送数据。
params：请求参数，用于向服务器发送查询字符串参数。
timeout：请求超时时间，超过此时间后请求将被取消。
withCredentials：是否允许跨域请求携带凭证，如 cookie。
responseType：期望服务器返回的数据类型，如 JSON 或文本。
onUploadProgress：上传进度回调函数，用于跟踪上传进度的百分比。
onDownloadProgress：下载进度回调函数，用于跟踪下载进度的百分比。
cancelToken：取消令牌，用于取消请求。
adapter：请求适配器，用于自定义请求的底层实现。

使用 Axios 请求的常见配置

你可以通过以下方式使用 Axios 请求的常见配置：

import axios from 'axios';

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

instance.get('/users').then(response => {
  console.log(response.data);
});