vue

下面基于,前端要调用接口删除图片的环境背景下,说明为了实现删除成功图片消失,删除失败图片不会消失的实现过程` 用到ES6中的promise语法 promise异步调用** 在handleRemove方法调用删除图片的api方法，删除成功时return true，删除失败时return false; //删除图片 handleRemove(file, fileList) { console.log(file) // alert('删除') // return true; //删除图片 courseApi.deleteCoursePic('1').then((res) => { if(res.success){ this.$message.success('删除成功'); return true; }else{ this.$message.error(res.message); return false; } }); }, 在上边代码中将提交的课程id故意写错，按照我们预期应该是删除失败，而测试结果却是图片在页面上删除成功。 问题原因： 通过查询deleteCoursePic方法的底层代码，deleteCoursePic最终返回一个promise对象。 Promise是ES6提供的用于异步处理的对象，因为axios提交是异步提交，这里使用promise作为返回值。 Promise的使用方法如下： Promise对象在处理过程中有三种状态： pending：进行中 resolved：操作成功 rejected: 操作失败 Promise的构建方法如下： const promise = new Promise(function(resolve,reject){ //...TODO... if(操作成功){ resolve(value); }else{ reject(error); } }) 上边的构造方法function(resolve,reject)执行流程如下： 1）方法执行一些业务逻辑。 2）如果操作成功将Promise的状态由pending变为resolved，并将操作结果传出去 3）如果操作失败会将promise的状态由pending变为rejected，并将失败结果传出去。 上边说的操作成功将操作结果传给谁了呢？操作失败将失败结果传给谁了呢？ 通过promise的then、catch来指定 promise.then(function (result) { console.log('操作成功：' + result); }); promise. »