前端Axios知识点笔记

前端 Axios 博客知识点笔记

在前端开发中，与后端进行数据交互是必不可少的环节。Axios 作为一款基于 Promise 的 HTTP 客户端，凭借其简洁的 API、强大的功能和良好的兼容性，成为了前端开发者处理 HTTP 请求的热门选择。下面详细梳理 Axios 的相关知识点。

一、Axios 的基本概念

Axios 是一个基于 Promise 的 HTTP 客户端，主要用于浏览器和 Node.js 环境中发送 HTTP 请求。它可以轻松实现与后端服务器的数据交互，支持各种 HTTP 方法（如 GET、POST、PUT、DELETE 等），并且提供了丰富的配置选项和拦截器功能。

与传统的 XMLHttpRequest 和 jQuery 的 Ajax 相比，Axios 在语法上更简洁，处理异步操作更优雅，同时具备更好的错误处理机制和扩展性。

二、Axios 的特点

1. 基于 Promise：可以使用.then ()、.catch () 等 Promise 方法处理异步请求的结果，也可以结合 async/await 语法，让代码更具可读性。

1. 支持浏览器和 Node.js：在浏览器端，Axios 使用 XMLHttpRequest 发送请求；在 Node.js 环境中，它使用 http 模块发送请求，实现了跨平台使用。

1. 丰富的请求和响应拦截器：可以在请求发送前和响应返回后进行一些统一的处理，如添加请求头、处理错误等。

1. 自动转换 JSON 数据：会自动将请求数据和响应数据转换为 JSON 格式，无需手动解析。

1. 取消请求：支持取消尚未完成的 HTTP 请求，避免不必要的资源浪费。

1. 客户端防止 XSRF：提供了防止跨站请求伪造的机制，增强请求的安全性。

1. 丰富的配置选项：可以对请求的 URL、方法、 headers、超时时间等进行详细配置。

三、Axios 的安装

1. 使用 npm 安装

npm install axios

2. 使用 yarn 安装

yarn add axios

3. 直接引入 CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

安装完成后，在项目中通过 import 或 require 的方式引入即可使用：

// ES6模块引入

import axios from 'axios';

// CommonJS模块引入

const axios = require('axios');

四、Axios 的基本使用

1. 发送 GET 请求

GET 请求通常用于从服务器获取数据，参数可以通过 URL 的查询字符串传递。

// 方式一：直接在URL中携带参数

axios.get('/api/user?id=123')

.then(response => {

console.log('请求成功', response.data);

})

.catch(error => {

console.log('请求失败', error);

});

// 方式二：通过params配置传递参数

axios.get('/api/user', {

params: {

id: 123

}

})

.then(response => {

console.log('请求成功', response.data);

})

.catch(error => {

console.log('请求失败', error);

});

2. 发送 POST 请求

POST 请求通常用于向服务器提交数据，数据放在请求体中。

axios.post('/api/user', {

name: '张三',

age: 20

})

.then(response => {

console.log('请求成功', response.data);

})

.catch(error => {

console.log('请求失败', error);

});

3. 发送其他 HTTP 请求

Axios 支持所有常见的 HTTP 方法，如 PUT、DELETE、PATCH 等，使用方式与 GET、POST 类似。

// PUT请求：更新资源

axios.put('/api/user/123', {

name: '李四',

age: 22

})

.then(response => {

console.log('更新成功', response.data);

})

.catch(error => {

console.log('更新失败', error);

});

// DELETE请求：删除资源

axios.delete('/api/user/123')

.then(response => {

console.log('删除成功', response.data);

})

.catch(error => {

console.log('删除失败', error);

});

4. 通用请求方法

除了上述针对特定 HTTP 方法的快捷方法外，Axios 还提供了一个通用的 request 方法，可以通过配置指定请求的方法、URL 等信息。

axios({

method: 'post',

url: '/api/user',

data: {

name: '王五',

age: 25

},

params: {

type: 1

}

})

.then(response => {

console.log('请求成功', response.data);

})

.catch(error => {

console.log('请求失败', error);

});

五、Axios 的响应结构

Axios 的响应包含以下主要属性：

• data：服务器返回的响应数据。

• status：HTTP 状态码（如 200、404 等）。

• statusText：HTTP 状态信息（如 OK、Not Found 等）。

• headers：服务器返回的响应头。

• config：发送请求时的配置信息。

• request：生成的请求对象（在浏览器中是 XMLHttpRequest 实例，在 Node.js 中是 http.ClientRequest 实例）。

六、Axios 的拦截器

拦截器是 Axios 的重要特性，分为请求拦截器和响应拦截器，用于在请求发送前和响应返回后进行一些统一处理。

1. 请求拦截器

请求拦截器可以在请求发送前对请求配置进行修改，如添加请求头、设置 token 等。

// 添加请求拦截器

axios.interceptors.request.use(

config => {

// 在发送请求之前做些什么

// 例如：添加token到请求头

const token = localStorage.getItem('token');

if (token) {

config.headers.Authorization = `Bearer ${token}`;

}

return config;

},

error => {

// 对请求错误做些什么

return Promise.reject(error);

}

);

2. 响应拦截器

响应拦截器可以在响应返回后对响应数据进行处理，如统一处理错误、解析数据等。

// 添加响应拦截器

axios.interceptors.response.use(

response => {

// 对响应数据做点什么

// 例如：只返回data部分

return response.data;

},

error => {

// 对响应错误做点什么

// 例如：统一处理错误信息

if (error.response) {

switch (error.response.status) {

case 401:

// 未授权，跳转到登录页

window.location.href = '/login';

break;

case 404:

console.log('请求的资源不存在');

break;

case 500:

console.log('服务器内部错误');

break;

default:

console.log('请求出错');

}

}

return Promise.reject(error);

}

);

3. 移除拦截器

如果需要移除已添加的拦截器，可以通过拦截器返回的标识进行移除。

// 添加拦截器并获取标识

const myInterceptor = axios.interceptors.request.use(config => {

return config;

});

// 移除拦截器

axios.interceptors.request.eject(myInterceptor);

七、Axios 的配置

Axios 提供了丰富的配置选项，可以在全局、实例或单个请求中进行配置，配置的优先级为：单个请求配置 > 实例配置 > 全局配置。

1. 全局配置

axios.defaults.baseURL = 'https://api.example.com'; // 设置基础URL

axios.defaults.headers.common['Authorization'] = 'token'; // 设置通用请求头

axios.defaults.headers.post['Content-Type'] = 'application/json'; // 设置POST请求的Content-Type

axios.defaults.timeout = 5000; // 设置超时时间（毫秒）

2. 创建实例并配置

可以通过 create 方法创建 Axios 实例，并为实例设置单独的配置，适用于需要访问不同 API 地址或有不同配置需求的场景。

// 创建实例

const instance = axios.create({

baseURL: 'https://api.another-example.com',

timeout: 10000,

headers: {

'X-Custom-Header': 'foobar'

}

});

// 使用实例发送请求

instance.get('/data')

.then(response => {

console.log(response.data);

});

八、错误处理

在使用 Axios 发送请求时，可能会出现各种错误，如网络错误、超时、服务器错误等，需要进行妥善处理。

axios.get('/api/data')

.then(response => {

console.log('请求成功', response.data);

})

.catch(error => {

if (error.response) {

// 请求已发出，服务器返回状态码不是2xx

console.log('响应错误状态码：', error.response.status);

console.log('响应错误数据：', error.response.data);

console.log('响应错误头：', error.response.headers);

} else if (error.request) {

// 请求已发出，但未收到响应

console.log('请求未收到响应：', error.request);

} else {

// 请求发送前发生的错误

console.log('请求错误：', error.message);

}

console.log('请求配置：', error.config);

});

九、取消请求

Axios 支持取消尚未完成的请求，可以通过 CancelToken 实现。

// 创建CancelToken源

const CancelToken = axios.CancelToken;

const source = CancelToken.source();

// 发送请求，并关联CancelToken

axios.get('/api/data', {

cancelToken: source.token

})

.then(response => {

console.log('请求成功', response.data);

})

.catch(error => {

if (axios.isCancel(error)) {

console.log('请求已取消：', error.message);

} else {

console.log('请求错误：', error);

}

});

// 取消请求（可以在需要的地方调用，如组件卸载时）

source.cancel('用户取消了请求');

十、Axios 的实际应用场景

1. 数据获取：从后端 API 接口获取数据并渲染到页面，如列表数据、详情数据等。

1. 表单提交：将用户填写的表单数据提交到后端进行处理，如登录、注册、信息修改等。

1. 文件上传：通过 POST 请求将文件数据发送到后端，实现文件上传功能。

1. 定时刷新数据：定期发送请求获取最新数据，如实时聊天消息、股票行情等。

1. 批量操作：同时发送多个请求，并处理所有请求的结果，如批量删除、批量更新等。

十一、使用 Axios 的注意事项

1. 跨域问题：与 Ajax 一样，Axios 也受浏览器同源策略的限制，需要后端配合配置 CORS 或使用代理服务器解决跨域问题。

1. CSRF 防护：对于需要防范 CSRF 攻击的场景，可以在请求头中添加 CSRF 令牌，并确保后端进行验证。

1. 请求频率限制：避免频繁发送请求给服务器造成过大压力，可以通过防抖、节流等方式控制请求频率。

1. 合理设置超时时间：根据接口的实际情况设置合适的超时时间，既保证用户体验，又能及时反馈错误。

1. 避免在拦截器中做过多耗时操作：拦截器中的操作会影响请求和响应的处理速度，应保持简洁高效。

总之，Axios 是一款功能强大、使用便捷的 HTTP 客户端，掌握其使用方法和相关特性，能够极大地提高前端与后端数据交互的效率和质量。在实际开发中，结合具体业务场景合理配置和使用 Axios，可以让网络请求的处理更加得心应手。