前言
在开发 Vue.js 前端项目时，一般都离不开与后端的数据交互。而使用 axios 这个小巧但功能强大的库，则是我们非常常用的一种方式。axios 的使用看似简单，但实际上在与项目结合使用时，也可能会遇到一些意想不到的问题。本文将介绍在 Vue.js 项目中使用 axios 的一些注意事项，以及遇到问题时的解决方法。
安装和基本使用
首先，我们需要通过 npm 或 yarn 进行安装：
npm install axios --save # 或 yarn add axios
安装完成后，我们就可以在代码中引入 axios 并使用了。以下是一个最基本的示例：
import axios from 'axios'
axios.get('/api/xxx').then(response => {
console.log(response.data)
}).catch(error => {
console.error(error)
})在上述代码中，我们首先引入了 axios。然后通过 axios.get 方法向服务器发送了一个 GET 请求，并在成功响应后输出返回的数据。当请求失败时，则会将错误对象输出到控制台。
注意事项
1. 同源策略及跨域问题
在使用 axios 过程中，我们需要注意到同源策略及跨域问题。同源策略是浏览器的一种安全策略，它要求在同一个来源下的 JavaScript 代码才能相互通信。而跨域问题则是指在向不同来源的服务器发送请求时，由于同源策略的限制，浏览器会阻止这种行为。
在实际开发中，我们一般需要在服务器端进行跨域处理。如果你无法在服务器端进行跨域设置，那么也可以使用 JSONP、CORS 等方式来解决跨域问题。
2. 请求方式
在 axios 中，我们可以使用 get、post、put、delete 等方法发送不同类型的请求。其中，get 请求可以直接向服务器发送数据，而 post、put、delete 等请求则需要将数据作为参数传递。
以下是一个示例：
import axios from 'axios'
axios.post('/api/xxx', { name: 'xxxxx' }).then(response => {
console.log(response.data)
}).catch(error => {
console.error(error)
})在上述代码中，我们通过 axios.post 方法向服务器发送了一个 POST 请求，并将参数 { name: 'xxxxx' } 作为请求体传递到服务器。
3. 请求拦截及响应拦截
在实际开发中，我们可能需要对每次请求或者响应进行一些统一的处理，比如在每次请求前添加一些通用参数、在请求失败时自动重新发起请求、在每次响应后对返回结果进行一些处理等。这时，可以使用 axios 的请求拦截器和响应拦截器来实现这些功能。
以下是一个示例：
-- -------------------- ---- ------- ------ ----- ---- ------- -- ----- ------------------------------------- -- - -- ----- ---------------------------- - ------- - - ---------- ------ ------ -- ----- -- - -- ------ ------ --------------------- -- -- ----- ---------------------------------------- -- - -- ---- ------ -------- -- ----- -- - -- ------ ------ ----------------------------------- -- -- ---- ----------------------------------- -- - -------------------------- -------------- -- - -------------------- --
在上述代码中，我们通过 axios.interceptors.request.use 方法添加了一个请求拦截器，用来在每次请求前添加一个请求头。同样的，在 axios.interceptors.response.use 方法中添加了一个响应拦截器，用来处理每次响应的数据。
解决方案
1. 收到 200 但无法获取数据
在使用 axios 时，有时我们会遇到这样一种情况：我们向服务器端发送了请求，然后收到了 200 状态码，但是却无法获取到数据。这个问题往往是由于跨域问题所引起的。
解决这个问题，我们需要在服务器端对跨域进行处理。可以使用 CORS、JSONP 等方式进行跨域，也可以使用代理等方式来绕过跨域的问题。
以下是一个示例：
-- -------------------- ---- -------
-- -------------
-------------- - -
---------- -
------ -
------- -
------- ------------------------- -- ----
------------- ----- -- ------
------------ -
-------- ------ -- ------
-
-
-
-
-在上述代码中，我们通过修改 vue.config.js 配置文件，将请求地址中的 /api 重写为 /api，然后将请求转发到 http://localhost:8080/ 地址上。
2. 处理跨域请求
在使用 axios 时，我们可能会向跨域的服务器发送请求。而如果服务器端没有进行跨域处理，那么请求将会失败。
解决这个问题，我们需要在服务器端进行跨域处理，如跨域头、JSONP、CORS 等方式。
以下是一个示例：
-- -------------------- ---- ------- -- ----------- --------------- ------------- ---- ----- - ----------------------------------------- ---- ------------------------------------------ -------------------------------------------------------------------- ------------------------------------------ ------------------------------ -------------------------- -------- -- ----------- -- ---------- ------------- ----------------- ---- ------ --
在上述代码中，我们在服务器端设置了跨域请求头，使得客户端可以正常向服务器发送请求。
3. 处理请求超时
在实际开发中，我们可能会遇到请求超时的情况。这个问题可能是由于网络或服务器响应不及时所引起的。
解决这个问题，我们需要使用 axios 的超时设置来解决。可以通过设置 axios.defaults.timeout 属性来设置请求超时时间。
以下是一个示例：
-- -------------------- ---- ------- ------ ----- ---- ------- ---------------------- - ----- -- --------- --- ----------------------------------- -- - -------------------------- -------------- -- - -------------------- --
在上述代码中，我们通过设置 axios.defaults.timeout 属性来设置请求超时时间。当请求时间超过 10s 时，将会触发 catch 方法中的异常处理函数。
总结
在 Vue.js 前端项目中使用 axios 是非常方便和常见的方式。然而，在与实际项目结合使用时，我们也需要注意到一些问题，如同源策略及跨域问题、请求方式、请求拦截及响应拦截等。如果这些问题得不到及时的解决，可能会导致无法正常发送请求、获取数据，甚至影响项目的稳定性和安全性。因此，在使用 axios 时，我们需要更加注意这些问题，并及时处理相关的错误和异常。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64904efc48841e9894e79f2d