这篇文章主要介绍“Vue前端交互模式与Promise怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue前端交互模式与Promise怎么使用”文章能帮助大家解决问题。
Promise 是异步编程的一种解决方案，从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息。
优点：
可以避免多层异步调用嵌套问题（回调地狱）
Promise 对象提供了简洁的 API，使得控制异步操作更加容易
实例化 Promise 对象，构造函数中传递函数，该函数中用于处理异步任务
resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过 p.then 获取处理结果
计算
安全
数据库
网络和加速
企业服务
var p = new Promise(function(resolve,reject){
//实现异步任务...
//成功时调用
resolve();
//失败时调用
reject();
});
p.then(function(ret){
//从resolve得到正常结果
},function(ret){
//从reject得到错误信息
});处理原生 Ajax
function queryData(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState!=4) return;
if(xhr.status == 200){
resolve(xhr.responseText);
}else{
reject('出错了');
}
}
xhr.open('get',url);
xhr.send(null);
});
}
//调用
queryData('http://localhost:3000/data').then(
function (data) {
console.log(data);
},
function (data) {
console.log(data);
}
)发送多次 ajax 请求(解决回调地狱)
queryData('http://localhost:3000/data')
.then(function (data) {
console.log(data);
//异常情况可以不处理
return queryData('http://localhost:3000/data1');
})
.then(function (data1) {
console.log(data1);
return queryData('http://localhost:3000/data2');
})
.then(function (data2) {
console.log(data2);
});返回 Promise 实例对象返回的该实例对象会调用下一个 then
返回普通值返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值
* p.then()得到异步任务的正确结果
* p.catch()获取异常信息
* p.finally()成功与否都会执行（暂时还不是正式标准）foo()
.then(function (data) {
console.log(data);
})
.catch(function (data) {
console.log(data);
})
.finally(function () {
console.log('finish');
})也可以写为:
foo()
.then(function (data) {
console.log(data);
},
function (data) {
console.log(data);
})
.finally(function () {
console.log('finish');
})Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
//p1,p2,p3为Promise实例对象任务
Promise.all([p1,p2,p3]).then((result)=>{
console.log(result);
})Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果
Promise.race([p1,p2,p3]).then((result)=>{
console.log(result);
})关于“Vue前端交互模式与Promise怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
