本文将介绍 Vue.js 中 axios 的使用方法及其注意事项，包括简单使用、拦截器及请求取消等内容。
简单使用
在 Vue 中，我们可以通过 npm 安装 axios，然后在组件中引入并使用。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ------ - ------ - ----- ---- - -- --------- - ---------------------- --------- -- - --------- - --------- -- ---------- -- - ----------------- -- - -展开代码
在上述示例代码中，我们通过 axios 发送了一个 GET 请求，请求的地址为 /api/data，请求成功后，将返回的数据赋值给组件中的 data。
拦截器
拦截器是 axios 的重要特性之一，可以在请求或响应被处理之前或之后进行干预，如添加公共请求头、处理请求异常等。
请求拦截器
axios.interceptors.request.use(config => { // 在发送请求之前进行处理 // 在 config.headers 中添加 token 等公共信息 return config; }, error => { return Promise.reject(error); });
在上述示例代码中，我们定义了一个请求拦截器，通过 axios.interceptors.request.use() 方法添加，在发送请求之前可以对请求进行相关处理，例如在请求头中添加 token、修改请求类型等。
响应拦截器
-- -------------------- ---- ------- ---------------------------------------- -- - -- --------- ------ --------- -- ----- -- - -- ---------------- - -- --------- ----- --- ---------------------------- - -- --------- ----- ------ ---展开代码
在上述示例代码中，我们定义了一个响应拦截器，通过 axios.interceptors.response.use() 方法添加，在响应数据返回后可以对返回数据进行相关处理，例如错误处理、状态码处理等。
请求取消
在某些情况下，我们需要在请求进行的过程中取消当前请求，axios 可以通过 cancel token 实现请求取消。
-- -------------------- ---- ------- ----- ----------- - ------------------ --- ------ - ----- ------- ---- ------------ ------- ------ ------------ --- ----------------------- - -- -- -------- -------- -------- - ------ -------- -- - --------- ------ - -- --- ----------- -- - ---------------------- --------------- -- - -- ------------------------ - -------------------- ---------- ---------------- - ---- - -------------------- - --- -- ---- ------------------------ -------- -- --- --------展开代码
在上述示例代码中，我们通过 const CancelToken = axios.CancelToken; 定义了一个取消请求的 CancelToken，在请求时通过 cancelToken 参数传递，并将 cancel 函数保存在 source 中，后续需要取消请求时，我们只需要调用 source.cancel('Operation canceled by the user.'); 就可以取消请求。
注意事项
axios.create()方法可以创建一个 axios 实例，配置实例化的 axios 实例可以拥有自己的默认配置及拦截器配置，用于区分不同的使用场景。在开发过程中，一般使用代理服务器解决跨域问题，而不是使用 jsonp 方式来处理，因为 axios 支持解决跨域问题的代理配置。
使用拦截器时，一定要注意拦截器的顺序，错误的顺序会导致拦截器无法正常执行。
在长时间的请求中，需要使用请求取消功能，避免用户多次操作造成请求堆积和浪费。
结语
通过上述示例和内容，我们可以清楚地了解 Vue.js 中 axios 的使用方法及其注意事项，为我们的开发工作提供了很好的指导和帮助。在实际开发中，我们应该根据需求灵活运用，并注意安全性及用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c51b8a6e1fc40e36e6312a
