在前端开发中，经常需要通过 Ajax 技术与后端进行数据通信。而在处理 Ajax 的过程中，则需要使用 XMLHttpRequest 对象，或者用基于 Promise 的 fetch 方法来完成数据请求。为了方便开发者使用，引入了一些封装好的库来简化开发流程，比如 jquery 的 ajax 函数、axios 和 vue-resource 等等。而今天介绍的则是一款基于 vue 和 Axios 的封装工具 __ajax-common-vue__。
安装
首先，在安装 ajax-common-vue 库之前，需要先安装 vue 以及 __axios__。
--- ------- --- ----- ------
接着，再通过 npm 安装 __ajax-common-vue__。
--- ------- --------------- ------
引入
在 Vue 项目中，需要将 ajax-common-vue 引入到 main.js 中，并通过 Vue.use() 注册插件。
------ --- ---- ----- ------ ----- ---- ------- ------ - ---------- - ---- ----------------- ------------------- - ----- --
使用
使用 ajax-common-vue 时，需要在 Vue 组件里面使用 this.$ajax 来访问，这里会自动带上 url 的前缀和请求头的设置。基本使用方法和 Axios 一样，只不过可以简化掉前缀和请求头的重复代码。
GET 请求
--------------------------- - ------- - --- - - --
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--POST 请求
---------------------------- - --- - --
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--PUT 请求
--------------------------- - --- -- ----- ---- --
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--DELETE 请求
------------------------------ - ------- - --- - - --
-------------- -- -
--------------------------
--
------------ -- -
--------------------
--配置
可以通过 Vue 的 prototype 自定义一些配置项，比如设置请求的超时时间和请求的前缀等等。
------------------------------------ - ----- ------------------------------------ - ------
总结
通过 ayax-common-vue__，我们可以更加方便地处理 Ajax 请求，并且代码更加简洁明了。而且可以将重复的代码抽离到插件中，避免代码冗余，方便维护。总之，__ajax-common-vue 更加适用于 Vue 项目中，使用起来十分方便，值得我们尝试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005749a81e8991b448ea19f