最近开发项目遇到了一个问题：
我的项目使用了VUE,并使用VUX框架做ui。在该项目中，我把ajax请求封装在了一个js文件中。
我希望能够在AJAX请求完成之后，弹出一个提示框告诉用户处理结果，但在封装了ajax的JS文件中无法调用vux的toast组件（提示框组件）（如果有能调用的方法请告诉我QAQ），本菜鸡在查了大量的资料，给自己挖了很多坑之后，终于找到了一个超级简单的解决方法。
解决方法如下：
一、项目结构
--api(文件夹)
---- api.js(封装了ajax的js文件)
--components(存放vue组件的文件夹)
----hello.vue(vue组件，该组件需要调用api.js中的ajax方法)
二、解决方案
在API.JS文件中这样写
import axios from 'axios'
export default{
components:{
axios,
},
add_ajax(一些参数){
//对参数做一些处理
return axios.post(url, data)
},
}
复制代码在api.js中，我将axios.post(url, data)这个ajax请求直接return回去。
为啥要这样做呢？因为axios是基于promise的（不知道promise是啥的可以点这里），因此在此处返回的是其实一个promise对象，promise有一个特别好用的.then()方法，在promise对象执行完毕之后，js会帮我们自动执行.then()里面的函数。
因此我们在组件中通过.then()方法中调用vux的toast，就可以在ajax请求完成后，弹出提示窗啦！
下面是组件内调用API的写法：
methods:{add(){
api.add_ajax(一些参数).then((response)=> {
if(response.data.result==1){
toast.show({
text: '请求成功',
})
}else{
toast.show({
text: '请求失败',
type:'cancel' })}
}).catch(function (error) {
//错误处理balabala
console.log(error);
});
}
}，}复制代码三、更优化的解决方式
直接把VUE组件中的toast插件作为一个参数传到ajax对应的函数即可：
api.js中的ajax函数这样写：
add_mybook_with_toast(para,toast) //toast为传入的VUX组件
{
axios.post(url, data) .then(function (response) { toast.show({
text:'成功！',
}) console.log(response); }) .catch(function (error) { console.log(error); });
}复制代码组件里面这样写：
let toast=this.$vux.toast //将组件传入ajax函数中api.add_mybook_with_toast(para,toast)复制代码四、其他处理方式
网上的其他大神提出了一些方案，但是由于我初学VUE和es6，所以不大理解，不过我还是按照他的方法试了一下：
1）在js文件中把ajax的结果通过 throw 抛出，然后再在组件中用try catch 语句处理ajax结果：
经过测试，这个方法不靠谱，由于ajax是异步的，如果把调用ajax的函数放入try语句中，不管异步函数报了什么错，catch语句是获取不到的。
以下是伪代码：
try{
ajax（）
//该函数获取AJAX结果后抛出异常
}
catch(e)
{
console.log('异常')
}
//这种方式catch(){}语句永远不会执行复制代码2)使用拦截器
这种方式是知乎一位同学提出的，（回答链接在这里）但是我不知道拦截器怎么用在组件中所以放弃了。。。。
3)使用非axios的ajax库，通过返回一个promise对象进行处理
这种方式理论上应该是靠谱的，不过请记得，如果使用了axios处理ajax，那么久不再建议使用promise对象了，因为axios本身就自带了peomise属性的，如果再在其上使用peomise，代码会变得很难看懂很复杂- -。