vue页面取ajax返回值,Vue前端交互模式、Promise用法(回调地狱)

Promise 概述Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息。

优点:可以避免多层异步调用嵌套问题(回调地狱)

Promise 对象提供了简洁的 API,使得控制异步操作更加容易

Promise基本用法实例化 Promise 对象,构造函数中传递函数,该函数中用于处理异步任务

resolve 和 reject 两个参数用于处理成功和失败两种情况,并通过 p.then 获取处理结果var p = new Promise(function(resolve,reject){

//实现异步任务...

//成功时调用

resolve();

//失败时调用

reject();

});

p.then(function(ret){

//从resolve得到正常结果

},function(ret){

//从reject得到错误信息

});

基于 Promise 处理 Ajax 请求处理原生 Ajaxfunction 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);

});

then参数中的函数返回值返回 Promise 实例对象返回的该实例对象会调用下一个 then

返回普通值返回的普通值会直接传递给下一个 then,通过 then 参数中函数的参数接收该值

Promise常用的API

1.实例方法* 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');

})

2.对象方法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);

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值