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