ES6之Promise

Promise

1.基础结构
	Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。
	
    new Promise(function(resolve,reject)
                {
                    ..
                });
	
    function getImgs(src) {
        return new Promise(function (resolve, reject) {
            let img=new Image();
            img.src=src;
            img.onload=function (e) {
                resolve(img);
            };
            img.onerror=function (e) {
                reject("错误")
            }
        });
    }

    getImgs("img/Actor01-Braver01.png").then(function (img) {
                console.log(img);
        },function (error) {
            console.log(error)
        })
2.then
	Promise必须提供一个then方法,用以访问当前值、最终的返回值以及失败的原因

    最基本的then方法接受两个函数参数 promise.then(成功执行的函数, 错误执行的函数),对应于状态变化到Resolved和Rejected时的函数调用
3.catch方法
	方法带一个参数,为失败时的回调。其实.catch方法就是 .then(undefined, onRejected)的简化版

	 getImgs("img/Actor01-Braver01.png").then(function (img) {
            console.log(img);
        }).catch(function (error) {
            console.log(error)
        })
4.链式异步
	 getImgs("img/item_0.png").then(function (img) {
            document.body.appendChild(img);
            return getImgs("img/item_2.png");
        }).then(function (img) {
            document.body.appendChild(img);
            return getImgs("img/item_3.png");
        }).then(function (img) {
            document.body.appendChild(img);
        })
5.all的使用
	 Promise.all([getImgs("img/item_2.png"),getImgs("img/item_0.png"),getImgs("img/item_3.png")])
      .then(function (imgArr) {
    //这里可以根据异步调用的先后顺序获取到一个数组,数组中就是所有异步传入的参数
          for(let i=0;i<imgArr.length;i++){
              document.body.appendChild(imgArr[i]);
          }
      })
      
	all用于全部异步完成统一执行
6.race的使用
	 Promise.race([getImgs("img/item_-1.png"),getImgs("img/item_2.png"),getImgs("img/item_0.png")])
      .then(function (img) {
        //race就是赛跑,这里只返回最先加载的数据
       document.body.appendChild(img);
      })

	race用于同时执行多个异步,如果那个先完成就直接结束,处理这个先完成的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值