Axios 备忘录

更新于 2025/3/22 22:37:17

此 Axios 备忘录 基于 Axios，并使用这个广受欢迎的 HTTP 客户端以 JavaScript 发出 API 请求。它描述了如何安装 Axios 和执行 CRUD 操作，还具有请求拦截器、授权标头和重试逻辑等高级功能。您还将了解如何设置全局配置、管理错误、转换请求和响应以及同时发出请求。有关安全、动态和模块化 API 集成的最佳实践的更多详细信息，请查看文档本身。

简介

Axios. js 是一个轻量级 JavaScript 库，用于从浏览器或 Node. js 发出 HTTP 请求。它通过提供易于使用的基于承诺的语法来执行 GET、POST、PUT、DELETE 和其他 HTTP 方法，从而加快 API 交互。 Axios 评论经常称赞它对 JSON 数据的简单处理、易于管理的请求和响应拦截器以及高效的错误处理。

安装和基础知识

使用 npm 安装 Axios

npm install axios

基本

import axios from 'axios';
const instance = axios.create({
   baseURL: 'https://api.example.com',
   timeout: 1000,
   headers: { 'Authorization': 'Bearer token' }
});

使用 Axios 进行 CRUD 操作

GET 请求

从 API 端点获取数据

axios.get('https://reqres.in/api/users?delay=2')
.then(response => {
   console.log(response.data);
})
.catch(error => {
   console.log("This is error: " + error.response);
})
.finally(() => {
   // 始终执行
});

POST 请求

将数据发送到 API 端点

axios.post('https://reqres.in/api/users', {
   "name": "aman",
   "job": "it"
})
.then(response => {
   console.log(response.data);
})
.catch(error => {
   console.log(error.response);
})
.finally(() => {
   // 始终执行
});

PUT 请求

更新 API 端点上的现有数据。

axios.put('https://reqres.in/api/users/2', {
   "name": "Raju",
   "job": "Dev Ops"
})
.then(response => {
   console.log(response.data);
})
.catch(error => {
   console.log(error.response);
})
.finally(() => {
   // 始终执行
});

DELETE 请求

从 API 端点删除数据。

axios.delete('https://reqres.in/api/users?page=2')
.then(response => {
   console.log(response.data);
})
.catch(error => {
   console.log(error.response);
})
.finally(() => {
   // 始终执行
});

带有授权标头的请求

发送带有授权令牌的请求。

axios.post('https://reqres.in/api/users', {
   "data": "somedata"
}, {
   headers: { 'Authorization': 'Token' }
})
.then(response => {
   console.log(response.data);
})
.catch(error => {
   console.log(error.response);
})
.finally(() => {
   // 始终执行
});

高级 Axios 功能

基本 URL 配置

设置基本 URL 以获得更简洁的代码。

axios.defaults.baseURL = 'https://api.example.com';

处理响应和错误

处理成功和错误响应。

axios.get('/endpoint')
.then(response => {
   console.log(response.data);
})
.catch(error => {
   console.error("Error: ", error.message);
});

请求和响应拦截器

全局修改请求和响应。

// 添加请求 
axios.interceptors.request.use(config => {
   config.headers['Authorization'] = 'Bearer token';
   return config;
}, error => Promise.reject(error));

// 添加响应
axios.interceptors.response.use(response => response, error => {
   console.error("Global error: ", error.response);
   return Promise.reject(error);
});

自定义 Axios 实例

使用特定配置创建可重复使用的实例。

const apiClient = axios.create({
   baseURL: 'https://api.example.com',
   timeout: 2000
});

重试逻辑

使用 axios-retry 实现自动重试。

import axiosRetry from 'axios-retry';

axiosRetry(axios, { retries: 3 });

进度跟踪

监控文件上传/下载进度。

axios.post('/upload', formData, {
   onUploadProgress: progressEvent => {
      console.log(`Uploaded: ${(progressEvent.loaded / progressEvent.total) * 100}%`);
   }
});

Request 请求取消

使用 CancelToken 或 AbortController 取消正在进行的请求。

const controller = new AbortController();

axios.get('/endpoint', { signal: controller.signal })
.catch(error => {
   if (error.name === 'CanceledError') {
      console.log('Request canceled');
   }
});

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

timeout 超时

设置请求超时。

axios.get('/endpoint', { timeout: 5000 })
.catch(error => {
   if (error.code === 'ECONNABORTED') {
      console.error('Request timed out');
   }
});

查询参数

在请求中传递查询字符串。

axios.get('/endpoint', {
   params: { id: 123, sort: 'desc' }
});

标头和授权

授权标头

axios.get('/user', {
   headers: { 'Authorization': 'Bearer YOUR_TOKEN' }
})
   .then(response => console.log(response.data))
   .catch(error => console.error(error));

自定义标题

axios.post('/submit', data, {
   headers: { 'Custom-Header': 'value' }
})
   .then(response => console.log(response.data))
   .catch(error => console.error(error));

处理全局配置

设置全局基本 URL −

axios.defaults.baseURL = 'https://api.example.com';

设置全局标头

axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';

转换请求和响应

转换请求

axios.defaults.transformRequest = [(data) => {
   // 修改 request 请求数据
   return JSON.stringify(data);
}];

转换响应

axios.defaults.transformResponse = [(data) => {
   // 修改 Response 响应数据
   return JSON.parse(data);
}];

同时处理多个请求

axios.all([
   axios.get('/user'),
   axios.get('/posts')
])
.then(axios.spread((userResponse, postsResponse) => {
   console.log(userResponse.data);
   console.log(postsResponse.data);
}))
.catch(error => console.error(error));

全局处理错误

axios.interceptors.response.use(
   response => response,
   error => {
      if (error.response.status === 401) {
         console.log("Unauthorized: Redirecting to login...");
         // 重定向或处理刷新令牌逻辑
      } else if (error.response.status === 500) {
         console.log("Server error, please try again later.");
      }
      return Promise.reject(error);
   }
);

ReactJS 教程

Hooks

ReactJS 高级

其他概念

ReactJS 有用资源