前言
在前端开发中，发送 HTTP 请求是非常常见的操作。Vue.js 是一款流行的前端框架，而 axios 是一款优秀的 JavaScript HTTP 库，常用于从前端发送 HTTP 请求。本文将详细介绍如何在 Vue.js 项目中使用 axios 发送 HTTP 请求，并提供一些示例代码以帮助读者更好地理解。
安装 axios
安装 axios 最简便的方法是通过 npm 安装，使用以下命令完成：
npm install axios
安装完成之后，在 Vue.js 项目中引入 axios：
import axios from 'axios'
使用 axios 发送 GET 请求
发送 GET 请求的方法是 axios.get(url[, config])，其中 url 是请求的地址，config 是配置选项，如请求头、超时时间等。例如，请求 GitHub 上某个用户的信息可以这样发送：
axios.get('https://api.github.com/users/username')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})此时，后端会返回相应的 JSON 数据，可以在控制台里查看。
使用 axios 发送 POST 请求
发送 POST 请求的方法是 axios.post(url[, data[, config]])，其中 url 是请求的地址，data 是请求体，config 是配置选项，如请求头、超时时间等。
例如，使用 axios 发送一个 POST 请求，提交一个 JSON 数据：
-- -------------------- ---- -------
------------------- -
---------- -------
--------- -----
--
-------------- -- -
---------------------
--
------------ -- -
--------------------
--使用 axios 发送 PUT 请求
发送 PUT 请求的方法是 axios.put(url[, data[, config]])，其中 url 是请求的地址，data 是请求体，config 是配置选项，如请求头、超时时间等。
例如，使用 axios 发送一个 PUT 请求，更新某个用户的信息：
-- -------------------- ---- -------
---------------------- -
---------- -------
--------- -----
--
-------------- -- -
---------------------
--
------------ -- -
--------------------
--使用 axios 发送 DELETE 请求
发送 DELETE 请求的方法是 axios.delete(url[, config])，其中 url 是请求的地址，config 是配置选项，如请求头、超时时间等。
例如，使用 axios 发送一个 DELETE 请求，删除某个用户的信息：
axios.delete('/user/123')
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
})配置选项
axios 提供了多种配置选项，方便根据需求设置。下面列出一些常用的配置选项。
headers
headers 是一个对象，用于设置请求头。
例如，设置 Content-Type 为 application/json：
-- -------------------- ---- -------
------------------- -
---------- -------
--------- -----
-- -
-------- -
--------------- ------------------
-
--
-------------- -- -
---------------------
--
------------ -- -
--------------------
--timeout
timeout 是一个数字，用于设置请求超时时间。如果超时，请求会被取消并抛出错误。
例如，设置超时时间为 1000 毫秒：
-- -------------------- ---- -------
------------------ -
-------- ----
--
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--withCredentials
withCredentials 是一个布尔值，用于设置是否允许跨域请求时发送 cookie。
例如，设置 withCredentials 为 true：
-- -------------------- ---- -------
------------------------------------- -
---------------- ----
--
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--baseURL
baseURL 是一个字符串，用于设置请求的基础 URL。发送请求时，会将 baseURL 和相应的请求地址拼接作为最终 URL。
例如，设置 baseURL 为 https://api.example.com/：
-- -------------------- ---- -------
----- -------- - --------------
-------- --------------------------
--
---------------------
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--创建 axios 实例
axios.create() 方法可以用于创建 axios 实例，方便对其进行更细粒度的控制。例如，可以设置 baseURL、headers 等，以及通过拦截器对请求进行处理。
-- -------------------- ---- -------
----- -------- - --------------
-------- ---------------------------
-------- -
--------------- ------------------
-
--
-- ---------
------------------------------------------ -------- -
-- ------------
------ ------
-- -------- ------- -
-- ---------
------ ---------------------
--
-- ---------
------------------------------------------- ---------- -
-- ---------
------ --------
-- -------- ------- -
-- ---------
------ ---------------------
--总结
本文介绍了如何在 Vue.js 项目中使用 axios 发送 HTTP 请求，并提供了一些示例代码。通过学习，我们可以更好地了解 axios 的使用方法，方便实现前端的 HTTP 请求功能。同时，我们还介绍了一些常用的配置选项和创建 axios 实例的方法，希望本文对读者能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647bf987968c7c53b0735f9f