什么是 axios？
Axios 是一个基于 Promise 用于浏览器和 node.js 的 HTTP 客户端，它能够以简单和可扩展的方式使用。
Axios 库是基于 XMLHttpRequest 对象的，能够全面支持浏览器和 node.js 的请求 API。它还支持 Promise API，拦截请求和响应，转换请求和响应数据，取消请求等功能。
Axios 可以用于发送 HTTP 请求和处理响应。它还支持一些便捷的 API，如拦截器，用于在请求或响应被处理前，对其进行某些操作。
安装 axios
在 Vue.js 项目中使用 axios，需要先安装它。安装方式如下：
npm install axios
引入 axios
在 Vue.js 项目中使用 axios，需要引入它。在文件顶部引入 axios：
import axios from 'axios';
axios 的基本使用
发送 GET 请求
向服务器发送一个 GET 请求，语法如下：
axios.get(url[, config]);
其中，url 是必需的参数，config 是可选的。
config 可以配置请求参数，如 params、headers、auth 等，还可以配置响应参数，如 responseType、responseEncoding 等。
以下示例展示如何发送一个 GET 请求：
// 请求数据
axios.get('/api/getData')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});发送 POST 请求
向服务器发送一个 POST 请求，语法如下：
axios.post(url[, data[, config]]);
其中，url 是必需的参数，data 和 config 是可选的。
data 可以是一个字符串、二进制数据、普通对象、数组等。
以下示例展示如何发送一个 POST 请求：
-- -------------------- ---- -------
-- ----
--------------------------- -
---------- -------
--------- -----
--
-------------- ---------- -
----------------------
--
--------------- ------- -
-------------------
---发送 PUT 请求
向服务器发送一个 PUT 请求，语法如下：
axios.put(url[, data[, config]]);
其中，url 是必需的参数，data 和 config 是可选的。
以下示例展示如何发送一个 PUT 请求：
-- -------------------- ---- -------
-- ----
------------------------- -
---------- -------
--------- -----
--
-------------- ---------- -
----------------------
--
--------------- ------- -
-------------------
---发送 DELETE 请求
向服务器发送一个 DELETE 请求，语法如下：
axios.delete(url[, config]);
其中，url 是必需的参数，config 是可选的。
以下示例展示如何发送一个 DELETE 请求：
// 请求数据
axios.delete('/api/deleteData')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});axios 的高级使用
设置默认的请求和响应配置
使用 axios.create() 方法可以创建一个 axios 实例，它可以使用多个独立的配置和拦截器。
使用实例化 axios 对象，可以指定默认的请求和响应配置，如下所示：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foo'}
});拦截器功能
axios 允许设置请求拦截器和响应拦截器，在请求、响应被处理前，可以对其进行操作。请求拦截器可以在请求被发送前修改数据，响应拦截器可以在接收响应后修改数据。
以下是一个请求拦截器示例：
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);
});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