ES6 promise

jerry 发布于2019-08-22 16:18 / 1918人阅读

摘要：基本概念是中新增的异步编程解决方案，体现在代码中它是一个对象，可以通过构造函数来实例化。只要期中有一个被，的状态就变成，此时第一个被的实例的返回值，会传递给的回调函数。

Promise

基本概念：
Promise：是ES6中新增的异步编程解决方案，体现在代码中它是一个对象，可以通过Promise 构造函数来实例化。

new Promise(cb)
三种状态：Pending、 Resolved、Rejected

两个原型方法：
Promise.prototype.then()
Promise.prototype.catch()

两个常用的静态方法：
Promise.all() // 可以将多个Promise实例包装成一个新的Promise实例

当所有Promise实例的状态都变成resolved，Promise.all的状态才会变成resolved，此时返回值组成一个数组，传递给then中的resolve函数。

只要期中有一个被rejected，Promise.all的状态就变成rejected，此时第一个被rejected的实例的返回值，会传递给p的回调函数。

Promise.resolve()

Pending ====> Resolved(已完成)
Pending ====> Rejected(已失败)

console.log(1)
const p = new Promise(function(resolve, reject){
    const img = new Image();
    img.src = "";
    img.onload = function(){
        resolve(this);
    }
    img.onerror = function(){
        reject(new Error("图片加载失败"));
    }
})

p.then(function(img){
   document.body.appendChild(img);
}, function(err){
    console.log(err)
}) //第一个参数是执行成功的，第二个函数是执行失败（一般不推荐第二个参数，采用catch）
console.log(2)
p.catch(function(err){
   console.log(err)
})
 // 1 2 error（异步，不影响后面加载）
 
 
var imgs = ["a.jpg", "b.jpg", "c.jpg"]
function loadImg(url){
    const p = new Promise(function(resolve, reject){
        const img = new Image();
        img.src = "";
        img.onload = function(){
            resolve(this);
        }
        img.onerror = function(){
            reject(new Error("图片加载失败"));
        }
    })
    return p;
}

const allDone = Promise.all([loadImg(imgs[0])], [loadImg(imgs[1])], [loadImg(imgs[2])]);

allDone.then(function(data){
   console.log(data) // data 就是一组数组
}).catch(function(err){
   console.log(err) //
})

Promise.resolve()三种用法
//参数是Promise实例，将不做任何修改、原封不动的返回这个实例

Promise.resolve(loadImg(imgs[0]).then(function(data){
  console.log(data) // 
})

//将对象转为Promise对象，然后就立即执行thenable对象的then方法

 Promise.resolve({
   then(resolve, reject){
       const img = new Image();
       img.src = imgs[0];
       img.onload = function (){
           resolve(this)
       }
   }
 }).then(function(data){
     
 })

//参数是一个基本数据类型或者不传参数，那么返回一个状态为resolved的Promise对象

  Promise.resolve("abc").then(function(str){
   console.log(str); //abc
  })
  
  const p = Promise.resolve();
  console.log(p)

云服务器 GPU云服务器 es6中的promise Promises promise promises异步

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

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

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

摘要：和和都有和，但是略有不同。实际上返回的是一个对象。和添加的回调，添加的回调。所以在调用成功的情况下执行添加的回调，调用失败时执行添加的回调。，产生对象并，产生对象并，然后继续处理，的语法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不过它们的作用可以简单的用两句话来描述 Deffere...

Yujiaao 2019-08-21 10:39 评论0 收藏0
es6 - Promise

摘要：所谓异步编程中的异步是相对于同步的概念的。是一系列异步编程规范的统称。如果中的回调函数返回一个值，那么返回的将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。参考介绍基础篇深入理解与异步编程。 es6 promise与异步编程对于一些还不具备大量编程经验的朋友来说，promise可能是es6比较难以掌握的点。首先是很多名词，比如Promises，es6 Promise,...

wemallshop 2019-08-22 15:11 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
浅谈ES6原生Promise

摘要：如果有错误，则到的第二个回调函数中，对错误进行处理。假设第一个的第一个回调没有返回一个对象，那么第二个的调用者还是原来的对象，只不过其的值变成了第一个中第一个回调函数的返回值。 ES6标准出炉之前，一个幽灵，回调的幽灵，游荡在JavaScript世界。正所谓：世界本没有回调，写的人多了，也就有了})})})})})。 Promise的兴起，是因为异步方法调用中，往往会出现回调函数一...

yedf 2019-08-20 10:30 评论0 收藏0
ES6的Promise：要优雅，也要浪漫

摘要：就算改变已经发生了，即使再对对象添加回调函数，也会立即得到这个结果。方法接收个参数，第一个参数是状态的回调函数，第二个参数可选是状态的回调函数。简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。在ECMAScript 6标准中，Promise被正式列为规范，Promise，字面意思就是许诺，承诺，嘿，听着是不是很浪漫的说？我们来探究一下这个浪...

weizx 2019-08-20 12:04 评论0 收藏0