安装完成后自动挂载在 vue 实例 this.$ajax
CDN 安装
使用 script 方式安装，VXEAjax 会定义为全局变量
生产环境请使用 vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。
cdnjs 获取最新版本
点击浏览已发布的所有 npm 包源码
<script src="https://cdn.jsdelivr.net/npm/vxe-ajax/dist/vxe-ajax.js"></script>
unpkg 获取最新版本
点击浏览已发布的所有 npm 包源码
<script src="https://unpkg.com/vxe-ajax/dist/vxe-ajax.js"></script>
AMD 安装
require.js 安装示例
// require 配置
require.config({
paths: {
// ...,'xe-ajax': './dist/xe-ajax.min','vxe-ajax': './dist/vxe-ajax.min'
}
})
// ./main.js 安装
define(['vue','xe-ajax','vxe-ajax'],function (Vue,XEAjax,VXEAjax) {
// 非 ES6 环境中如果需要启用模拟 Promise 模式对vue 实例上下文的支持（和 ES6 箭头函数效果一样），设置 {context: true}
Vue.use(VXEAjax,{context: true}) // 不建议启用模拟Promise,请使用箭头函数
})
ES6 Module 安装
npm install xe-ajax vxe-ajax --save
通过 Vue.use() 来全局安装
import Vue from 'vue'
import XEAjax from 'xe-ajax'
import VXEAjax from 'vxe-ajax'
Vue.use(VXEAjax,XEAjax)
// 通过vue实例的调用方式
this.$ajax.fetchGet ('/api/user/list',{id: 1})
this.$ajax.fetchPost ('/api/user/save',{id: 1})
示例
./Home.vue
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
loading: false,list: []
}
},methods: {
init () {
this.loading = true
this.$ajax.fetchGet('/api/user/list').then(response => {
this.loading = false
if (response.ok) {
response.json().then(data => {
this.list = data
})
} else {
this.list = []
}
})
}
},created () {
this.init()
}
}
</script>