在 Vue.js 中，axios 是一个常用的 HTTP 客户端库，它可以帮助我们方便地发送 HTTP 请求并处理响应。在实际开发中，我们经常会使用 axios 来获取数据、提交表单等操作。本文将介绍 Vue.js 中使用 axios 发送 HTTP 请求的最佳实践，包括如何配置 axios、如何使用拦截器、如何处理错误等方面。
安装和配置 axios
首先，我们需要在项目中安装 axios。可以使用 npm 或 yarn 安装：
--- ------- ----- ------
---- --- -----
安装完成后，在 Vue.js 中使用 axios 的方式很简单，只需要在需要发送请求的组件中引入 axios 并使用它即可：
------ ----- ---- --------
------ ------- -
------ -
------ -
------ ---
--
--
--------- -
-----------------------
-------------- -- -
---------- - --------------
--
------------ -- -
---------------------
---
--
--这里我们发送了一个 GET 请求，获取了一个名为 /api/posts 的接口返回的数据，并将数据赋值给组件的 posts 数据。
但是，在实际开发中，我们往往需要对 axios 进行一些全局的配置，比如设置基础 URL、设置请求头等。这时候，我们可以在项目的入口文件中进行配置：
------ --- ---- ------ ------ ----- ---- -------- ---------------------- - ------------------------ -- ---- --- ---------------------------------------------- - ------- - - ------------------------------ -- ----- ------------------- - ------ -- - ----- ----- ------------- --------
这里我们设置了基础 URL 为 http://localhost:3000，设置了请求头中的 Authorization 字段为本地存储中的 token。并将 axios 实例挂载到了 Vue.prototype 上，这样在组件中就可以通过 this.$http 来访问 axios 实例了。
使用拦截器
在实际开发中，我们往往需要对 axios 的请求和响应进行一些全局的处理，比如添加 loading、处理错误等操作。这时候，我们可以使用 axios 的拦截器来实现。
拦截器分为请求拦截器和响应拦截器，请求拦截器会在发送请求之前被调用，可以用来添加请求头、添加 loading 等操作；响应拦截器会在接收到响应之后被调用，可以用来处理错误、关闭 loading 等操作。
下面是一个简单的例子，我们使用请求拦截器添加了 loading 效果，并使用响应拦截器处理了错误：
------ --- ---- ------
------ ----- ---- --------
---------------------- - ------------------------
------------------------------------- -- -
-- ------- -------
------------------------------
-- ------- -----
----- ----- - ------------------------------
-- ------- -
---------------------------- - ------- ----------
-
------ -------
---
---------------------------------------- -- -
-- ---------- -------
------------------------------
------ ---------
-- ----- -- -
-- ----
------------------------------
---------------------
-- -------------
-- ---------------- -
------ ----------------------- -
---- ----
-- ----------
------
---- ----
-- --------- --- --
------
---- ----
-- ------------
------
-
-
------ ----------------------
---
------------------- - ------这里我们在请求拦截器中添加了 loading 效果，并在请求头中添加了 token；在响应拦截器中关闭了 loading，并处理了错误。根据错误类型进行了不同的处理。
处理错误
在使用 axios 发送 HTTP 请求时，我们需要注意处理错误。axios 的错误有两种类型：网络错误和 HTTP 错误。
网络错误通常是由于网络连接中断、DNS 解析失败等原因导致的，这时候 axios 会抛出一个 Error 对象。我们可以通过 try-catch 来捕获这个错误，并进行相应的处理。
HTTP 错误通常是由于服务器返回了一个错误状态码导致的，这时候 axios 会抛出一个包含 response 对象的错误。我们可以通过判断错误的状态码来进行相应的处理。
下面是一个简单的例子，我们使用 try-catch 来捕获网络错误，并使用 axios 的 catch 方法来捕获 HTTP 错误：
------ ----- ---- --------
--- -
----- -------- - ----- ------------------------
---------------------------
- ----- ------- -
-- ---------------- -
-----------------------------------
- ---- -
-----------------------------
-
-这里我们使用了 try-catch 来捕获网络错误，使用 axios 的 catch 方法来捕获 HTTP 错误。如果捕获到了 HTTP 错误，我们可以通过 error.response 来获取响应对象，并获取其中的错误信息。
总结
本文介绍了 Vue.js 中使用 axios 发送 HTTP 请求的最佳实践，包括安装和配置 axios、使用拦截器、处理错误等方面。在实际开发中，我们应该根据项目的需求进行相应的配置和处理，以提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f8e555d10417a22249918f