es6-promise

jackwang 发布于2019-08-21 16:43 / 1748人阅读

摘要：是什么可以理解为一个承诺，如果调用，返回一个承诺给，然后就可以在写计划的时候这么写，当返回结果的时候，就执行方案，如果没有返回要的结果，就执行方案。这样一来，所有的潜在风险就都在的可控范围之内了。

promise是什么

Promise可以理解为一个承诺，如果A调用B，B返回一个承诺给A，然后A就可以在写计划的时候这么写，当B返回结果的时候，A就执行方案1，如果B没有返回A要的结果，A就执行方案2。这样一来，所有的潜在风险就都在A的可控范围之内了。
promise是es6解决异步编程的一种方案
通常使用的promise的有以下方法:
1、promise的构造函数
2、promise的构造函数的原型上边的方法 then catch
3、promise的静态方法 Promise.all Promise.resolve
每一个promise对象都会有三个状态 pending resolve reject 状态一旦改变就不会在变回来

promise的构造函数

新建一个promise 的时候参数为为一个函数函数为两个参数（resolve,reject）
这两个参数的具体内容在promise实例上边的then 和catch里边定义着

 const imgs=[
          "22.jpg",
          "111.jpg",
    ]
    var promise=new Promise(function (resolve,reject) {
        const img=new Image();
        img.src=imgs[0];
        img.onload=function () {
            resolve(this)
        }
        img.onerror=function () {
            reject(new Error("加载失败"))
        }
    })
    promise.then(function (img) {
        console.log("加载完成")
        document.body.appendChild(img)
    }).catch(function (error) {   //捕获异常
        console.log(error)
    })

Promise的静态方法 Promise.all方法

会将多个promise组实例对象生成一个新的 promise
当所有的Promise组中的实例的状态都变成resolved Promise.all的状态才会变成resolved 此时返回一个数组传递给then中的resolve函数
promise组中的实例只要有一个rejected Promise.all的状态就会变成rejected 此时第一个被rejected的实例返回值会传递给catch的函数

使用Promise的静态方法all来实现只有当一组图片都加载完之后才向页面中插入有一个没有加载成功就会报错

 const imgs=[
          "22.jpg",
          "111.jpg",
    ]
    function loadImg(url) {
        var promise=new Promise(function (resolve,reject) {
            const img=new Image();
            img.src=url;
            img.onload=function () {
                resolve(this)
            }
            img.onerror=function () {
                reject(new Error("加载失败"))
            }
        })
        return promise;
    }
    Promise.all([loadImg(imgs[0]),loadImg(imgs[1])]).then(function (datas) {
          datas.forEach(function (t) {
              document.body.appendChild(t)
          })
    }).catch(function (error) {
        console.log(error)
    })

Promise的静态方法 Promise.resolve方法

将一个对象转化为promise对象
有以下几种使用方法：
1、接受promise的实例对象

 Promise.resolve(loadImg(imgs[0])).then(function (img) {
        document.body.appendChild(img)
    })

和下面的代码实现的功能是相同的

loadImg(imgs[0]).then(function (img) {
      document.body.appendChild(img)
  })

2、接受then-able对象

   Promise.resolve({
       then(resolve,reject){
            var img=new Image();
            img.src=imgs[0];
            img.onload=function () {
                resolve(this);
            }
            img.onerror=function () {
                reject();
            }
       }
   }).then(function (img) {
       document.body.appendChild(img)
   })

3、Promise.resolve接受普通的数据类型
返回一个状态为resolved的promise对象而且接受

  Promise.resolve("ssasa").then(function (mess) {
       console.log(mess)   //ssasa
   })

云服务器 GPU云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88636.html

浅析es6-promise源码

摘要：主要逻辑本质上还是回调函数那一套。通过的判断完成异步和同步的区分。主要逻辑: 本质上还是回调函数那一套。通过_subscribers的判断完成异步和同步的区分。通过 resolve，reject -> publish -> invokeCallback -> resolve，reject的递归和下一条then的parent是上一条的child来完成then链的流转同步情况...

fox_soyoung 2019-08-23 16:16 评论0 收藏0
ES6-Promise

摘要：方法没有设置返回值。解决思路是，当遇到任务的返回值是一个或者，并且有自己的方法的时候，就将它当做是一个对象处理，等这个对象中的方法处理到的时候，把作为参数输出传递给后续的任务。前段时间看到关于microTask的文章，《Tasks, microTasks, queues and schedules》，感觉有必要澄清一下。本篇里用setTimeout来实现的Promise，和浏览器原生...

dackel 2019-08-21 14:17 评论0 收藏0
前端临床手扎——简单易用的fetch

摘要：如题，新增的真的简单易用，感觉现在这一个支持完全可行。虽然兼容性问题还是存在，但是打上后就基本解决了。来自使用简单使用这里说明一下，必须配合一起使用，这会得到更佳效果。如题，es6 新增的fetch真的简单易用，感觉现在这一个支持完全可行。 showImg(https://segmentfault.com/img/bVGlRy?w=995&h=631); 虽然兼容性问题还是存在，但是...

xingqiba 2019-08-22 10:46 评论0 收藏0
在微信小程序使用音乐api的方法，以及微信小程序播放背景音乐失败的解决方案汇总

摘要：下一步准备使用网易云代替音乐。已经开发新的网易云代替音乐了，需要的可以看看这篇文章为微信小程序开发的网易云音乐库项目要做一个可以为日记添加音乐的小程序，所以要用到音乐api，参考了一些文章后我们封装了一个qq音乐api库（完成了动态token获取，音乐搜索，音乐专辑图片，音乐名称，歌手名称，播放），有需要的可以到Github自提。小程序qq音乐api库Gihub地址https://...

Sleepy 2019-08-23 17:16 评论0 收藏0
turnjs fabricjs canvas 翻书

摘要：最近做了一个翻书效果的项目来总结一下实现过程和遇到的一些问题供自己以后快速解决问题希望也能帮到同样遇到此类问题的同学如果有更好的方法希望你能分享给我地址插件问题都是些自己觉的比较难解决的比较片面如有其他疑问可以留言交流或者当你从官网下载最近做了一个翻书效果的项目, 来总结一下实现过程和遇到的一些问题, 供自己以后快速解决问题, 希望也能帮到同样遇到此类问题的同学, 如果有更好的方法,...

mylxsw 2019-08-20 13:49 评论0 收藏0