ES6 的promise对象

ES6 专栏收录该内容
3 篇文章 0 订阅

一、含义及概述:

①是一种异步编程的解决方案,是一个对象,可以从这里获取异步操作的消息,有统一的接口,代表一个异步操作
②优点:(1、对象的状态不受外界的影响)三种状态:pending、fulfilled、rejected。是从pending变为fulfilled或rejected,改变以后,就不再改变状态了。(2、一旦状态改变就不会再变了。)而是一直保持这个结果(此处与事件监听不同,事件监听如果错过了,就没办法在获取到了)。
③缺点:无法取消,建立后就执行

二:基本应用

①:promise是一个构造函数,通过new 来生成一个实例
②:promise接受一个函数作为参数,该函数再接受两个函数resolve和reject 在函数中调用 resolve 函数后,会触发 promise.then 设置的回调函数;而调用 reject 函数后,会触发 promise.catch 设置的回调函数,promise的错误具有冒泡的性质,会一直向后传递,直到被 onReject 函数处理或 catch 语句捕获为止
then() 方法 、all()方法、race()方法、
(1)
(2)
(3)
④:promise再调用resolve或reject以后,就没什么用了,应该把获取到数据以后的任务放在then方法中
例一:
说明:
(1)、done是resolve的参数,函数执行以后,会通过resolve的把参数传递出去,
而then方法会接受resolve的这个参数,promise的实例的状态变为resolve,触发then方法绑定的回调函数 而then绑定的回调函数会延迟执行
(2)、promise新建以后会立即执行,(* Promise 是用来管理异步编程的,它本身不是异步的)所以下段代码的输出应该是 promise hi done这样的顺序。

function timeout(ms){
    return new Promise((resolve,reject)=>{
        //promise新建以后会立即执行
        console.log("promise");
        setTimeout(resolve, ms,'done');
    });
}
// then 方法指定resolve reject的回调函数。
timeout(1000).then((value)=>{
    console.log(value);
});
console.log("hi");

例二:

说明:串行执行任务
new Promise出来的实例,成功或者失败,取决于executor函数执行的时候,执行的是resolve还是reject决定的,或executor函数执行发生异常错误,这两种情况都会把实例状态改为失败的。

job1.then(job2).then(job3).catch(handleError);

例三:并行执行任务:同时获取多个用户的信息

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2,并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); 
    // 获得一个Array: ['P1', 'P2']
});

注:此例参考
例四:p1执行的快。会取得p1的值,p2就不再继续了,为了容错的

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

应用:

一:异步加载图片

unction loadImageAsync(url){
    return new Promise(function(resolve,reject){
        var image = new Image();
        image.onload = function(){
            return resolve(image);
            // console.log('成功');
            // document.getElementsByTagName('div'). innerHTML=`${image} niaho`;
        }
        image.onerror = function(){
            return reject(new Error('could not load image at'+url));
            // console.log('失败');
        }  
        image.src=url;
    });
}
loadImageAsync('./timg.jpg').then((result)=>{
    console.log(result);
    // document.getElementById('img').innerHTML+=`${result}`;
    // 此处用innerHTML不显示,用appendChild
    document.getElementById('img').appendChild(result);
}).catch(error=>{
    console.log(error)});

二:promise对象实现ajax操作

。。。。。。。。。。。。。。没了

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值