什么是 axios？
Axios 是一个基于 Promise 用于浏览器和 node.js 的 HTTP 客户端，它能够以简单和可扩展的方式使用。
Axios 库是基于 XMLHttpRequest 对象的，能够全面支持浏览器和 node.js 的请求 API。它还支持 Promise API，拦截请求和响应，转换请求和响应数据，取消请求等功能。
Axios 可以用于发送 HTTP 请求和处理响应。它还支持一些便捷的 API，如拦截器，用于在请求或响应被处理前，对其进行某些操作。
安装 axios
在 Vue.js 项目中使用 axios，需要先安装它。安装方式如下：
--- ------- -----
引入 axios
在 Vue.js 项目中使用 axios，需要引入它。在文件顶部引入 axios：
------ ----- ---- --------
axios 的基本使用
发送 GET 请求
向服务器发送一个 GET 请求，语法如下：
--------------- ---------
其中，url 是必需的参数，config 是可选的。
config 可以配置请求参数，如 params、headers、auth 等，还可以配置响应参数，如 responseType、responseEncoding 等。
以下示例展示如何发送一个 GET 请求：
-- ----
-------------------------
-------------- ---------- -
----------------------
--
--------------- ------- -
-------------------
---发送 POST 请求
向服务器发送一个 POST 请求，语法如下：
---------------- ------ ----------
其中，url 是必需的参数，data 和 config 是可选的。
data 可以是一个字符串、二进制数据、普通对象、数组等。
以下示例展示如何发送一个 POST 请求：
-- ----
--------------------------- -
---------- -------
--------- -----
--
-------------- ---------- -
----------------------
--
--------------- ------- -
-------------------
---发送 PUT 请求
向服务器发送一个 PUT 请求，语法如下：
--------------- ------ ----------
其中，url 是必需的参数，data 和 config 是可选的。
以下示例展示如何发送一个 PUT 请求：
-- ----
------------------------- -
---------- -------
--------- -----
--
-------------- ---------- -
----------------------
--
--------------- ------- -
-------------------
---发送 DELETE 请求
向服务器发送一个 DELETE 请求，语法如下：
------------------ ---------
其中，url 是必需的参数，config 是可选的。
以下示例展示如何发送一个 DELETE 请求：
-- ----
-------------------------------
-------------- ---------- -
----------------------
--
--------------- ------- -
-------------------
---axios 的高级使用
设置默认的请求和响应配置
使用 axios.create() 方法可以创建一个 axios 实例，它可以使用多个独立的配置和拦截器。
使用实例化 axios 对象，可以指定默认的请求和响应配置，如下所示：
------ ----- ---- -------- ----- -------- - -------------- -------- -------------------------- -------- ----- -------- ------------------- ------ ---
拦截器功能
axios 允许设置请求拦截器和响应拦截器，在请求、响应被处理前，可以对其进行操作。请求拦截器可以在请求被发送前修改数据，响应拦截器可以在接收响应后修改数据。
以下是一个请求拦截器示例：
--------------------------------------- -------- - -- ----------- ------ ------- -- -------- ------- - -- --------- ------ ---------------------- ---
以下是一个响应拦截器示例：
---------------------------------------- ---------- - -- --------- ------ --------- -- -------- ------- - -- --------- ------ ---------------------- ---
Promise 封装
通过 Promise 封装 axios 库，可以更好地组织代码，并在多个组件中重用代码。例如，我们可以在 vue 组件中执行命令以获取数据：
------ ------- -
--------- -
----------------
--
-------- -
----------- -
-------------------------
-------------- -- -
--------- - -------------
--
------------ -- -
-------------------
--
-
-
-总结
在 Vue.js 中使用 axios 发送 HTTP 请求是一项非常重要的任务。本文介绍了如何安装 axios 库以及如何在 Vue.js 中使用 axios 库发送 GET、POST、PUT 和 DELETE 请求，以及如何使用 axios 的高级特性。对于想要学习使用 Vue.js 发送 HTTP 请求的初学者，本文提供了详细的介绍和示例代码，有助于更好地理解和应用该技术。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64acaf9248841e989489c807