Axios 的原理

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了一种简单而强大的方式来发送 HTTP 请求。本文将深入探讨 Axios 的原理，帮助开发者更好地理解和使用这一库。

1. Axios 的基本使用

Axios 的基本用法非常简单。以下是一个发送 GET 请求的示例：

javascript">axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

我们也可以使用 async/await 语法来简化异步代码：

javascript">async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.log(error);}
}

2. Axios 的核心原理

Axios 的核心原理主要包括以下几个方面：

2.1 创建 XMLHttpRequest 对象

Axios 使用原生的 XMLHttpRequest 对象来发送 HTTP 请求。在浏览器环境中，XMLHttpRequest 是一个用于与服务器交互的 API。

2.2 处理 Promise

Axios 返回一个 Promise 对象，这使得我们可以使用 then 和 catch 方法来处理异步操作。当请求成功时，Promise 被解析（resolved）；当请求失败时，Promise 被拒绝（rejected）。

2.3 请求和响应拦截器

Axios 提供了请求和响应拦截器，允许我们在请求发送前和响应返回后执行自定义逻辑。这对于处理公共逻辑（如添加请求头、处理错误等）非常有用。

javascript">// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});

2.4 处理请求和响应数据

Axios 允许我们通过配置对象来处理请求和响应数据。例如，我们可以设置请求头、请求方法、请求参数等。

javascript">axios({method: 'post',url: '/login',data: {firstName: 'Frodo',lastName: 'Baggins'},transformRequest: [function (data, headers) {// 对发送的数据进行转换return JSON.stringify(data);}],transformResponse: [function (data) {// 对返回的数据进行转换return JSON.parse(data);}]
});