基于axios的vue插件,让http请求更简单
ajax-plus
基于axios 的 Vue 插件
如何使用
npm 模块引入
首先通过 npm 安装
```npm install --save ajax-plus or yarn add ajax-plus -S
<p>然后在入口文件引入并配置:</p>
<p>对标axios的配置,详见<a href="https://www.npmjs.com/package/axios" rel="nofollow noreferrer">axios</a>🚀</p>
import Vue from 'Vue'
// 引入
import ajaxPlus from 'ajax-plus'
// 配置
Vue.use(ajaxPlus, {
//这里写一些ajax的option,详见axios文档,比如
baseURL: "https://jsonplaceholder.typicode.com",
timeout: 150000
})
<h2>示例</h2>
<h3>$ajaxPlus方法</h3>
<p>在 Vue 组件上添加了 <code>$ajaxPlus</code> 方法, 使用如下:</p>
// method可以为 get、delete、options、post、put、patch、head
// url为去除baseUrl的
// data为object
this.$ajaxPlus(method, url, data, res =>{
//success call back code
})
//也可以省略data参数,直接写callback(鉴于有些请求不需要传参数)
this.$ajaxPlus(method, url, res =>{
//success call back code
})
//$ajaxPlus已经在源码中处理catch容错了,假若想在代码里处理报错,再加一个参数,如下
this.$ajaxPlus(method, url, data, res =>{
//success call back code
},{
//catch是ajax请求失败后 要执行的代码
//finallyCb是ajax请求结束后 要执行的代码,无论成功或者失败
catchCb:()=>{//code}
finallyCb:()=>{//code}
})
<p>以上<code>catchCb</code>和<code>finallyCb</code>几乎很少会用</p>
<p><code>ajax-plus</code>中给<code>vue</code>全局mixin了一个<code>loading</code>变量,会在ajax请求结束后自动置为false,这个变量,你可以做一些ui层,比如按钮的防止高频功能</p>
Vue.mixin({
data () {
return {
loading: false
}
}
})
<p>如果你还要做其它相关操作 可以写在<code>finallyCb</code>中.</p>
<p>比如</p>
```<el-button :loading="loading1" @click="handleSubmit">按钮1</el-button>
handleSubmit(){
this.$ajaxPlus('post','/submit',{foo:1, bar:2}, res=>{
alert('提交成功了')
},{
catchCb:()=>{
alert('提交失败了')
},
finallyCb:()=>{
//按钮置为可点击状态
this.loading1 = false;
}
})
}
$ajax
也可以通过 this.$axios
来使用 axios
所有的 api 方法,如下:
this.$ajax.get(url, data).then(res =>{
//拿到res了
})
this.$ajax.post(url, data).then( res =>{
//拿到res了
})
try {
const data = await this.$ajax.post(url, data)
} catch (error) {
}
由于前后端约定不一致,关于callback的更深层的处理并没有完善。
axios
和router
、vuex
结合起来才能更强大,比如拦截器中根据status
判断是否登陆,用户的鉴权可以和store
结合,response
的相关报错和相关ui的Diag、Message结合会更棒.
更多使用方式以及改写, 参考源码, 欢迎提意见。