zoukankan      html  css  js  c++  java
  • es6-promise

    什么是promise?

    Promise是异步编程的一种解决方案,比传统的解决方案——回调函数和事件更合理更强大。Promise,简单说就是一个容器,里面保存着某个未来才会结束的时间(通常是一个异步操作)的结果。
    从语法上说,Promise是一个对象,从它可以获取异步操作的消息。promise提供统一的API,各种异步操作都可以用同样的方法进行处理

    Promise对象有以下两个特点:

    • 对象的状态不收外界影响。Promise对象代表一个异步操作,有三种状态
      • pending:初始状态,不是成功或失败的状态
      • fulfilled: 意味着操作成功完成。
      • rejected:意味着操作失败。

    只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是"承诺"的意思,表示其他手段无法改变。

    • 一旦状态改变,就不会在编,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,
      状态就凝固了,不会在改变了,会一直保持这个结果,这时就成为resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全
      不同,时间的特点是,如果你错过了它,在去监听,是得不到结果的

    Promise优缺点

    有了Promise对象,就可以将一步操作宜同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。Promise也有一些缺点。首先,无法取消
    Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反映到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段

    Promise创建

    要想创建一个promise对象,可以使用new来嗲用promise的构造器来进行实例化

    var promise = new Promise(function(resolve,reject){
    	//异步处理
    	//楚丽姐诉后、调用resolve或reject
    })
    console.log(promise)
    

    Promise构造函数接收一个函数作为参数,该函数的两个参数分别是resolve和reject。他们是两个函数,由Javascript引擎提供,不用自己部署。
    resolve函数的作用是,将Promise对象的状态从"未完成"变成"成功"(即从pending变为resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递
    出去;reject函数的作用是,将Promise对象的状态从"未完成"变为"失败"(即从pending变为rejected),在异步操作失败时候调用,并将一步操作报出的错误,作为参数传递出去。

    var firstPromise = new Promise(function(resolve,reject){
    	console.log(resolve,reject)
    	setTimeout(function(){
    		resolve("成功")
    	},250)
    })
    firstPromise.then(function(msg){
    	document.write("yay" + msg)
    })
    
    firstPromise.then(function(value){//success},function(error){//failure})
    

    Promise实例生成以后,可以用then方法分别制定resolved状态和rejected状态的回调函数.then方法可以接受两个回调函数作为参数,第一个毁掉韩式是Promise对象的状态变为resolved
    时调用,第二个回调是Promise对象的状态变为rejected时候调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接收Promise对象传出的值作为参数

    Promise新建后就会立即执行

    let promise2 = new Promise(function(resolve,reject){
    	console.log("promise")
    	resolve();
    })
    promise2.then(function(){
    	console.log('relolved')
    })
    console.log("hi!")
    //Promise
    //hi!
    //resolved
    

    上面代码中,promise新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出

    function loadImagesAsync(url){
    	return new Promise(function(resolve,reject){
    		const image = new Image();
    		image.onload = function(){
    			resolve(image);
    		}
    		image.onerror = function(){
    			reject(new Error('Could not load image at' + url))
    		}
    		image.src = url;
    	})
    }
    var obj = loadImagesAsync("")
    //Uncaught (in promise) Error: Could not load image at Image.image.onerror (promise.html?__hbt=1573626537186:43)
    

    如果调用resolve函数和reject函数时自带参数,那么他们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例,表示抛出的错误;resolve函数的参数除了正常的值以外,还可以是另一个promise实例

    const p1 = new Promise (function(resolve,reject){
    	console.log("p1")
    	setTimeout(() => reject(new Error('fail')),3000)
    })
    const p2 = new Promise(function(resolve,reject){
    	console.log("p2")
    	setTimeout(() => resolve(p1),1000)
    })
    p2.then(result => console.log(result)).catch(error => console.log(error))//Error: fail
    

    上面代码中,p1和p2都是Promise的实例,但是p2的resolve方法将p1作为参数,即一个异步操作的结果是返回另一个异步操作。
    注意,这是p1的状态是pending,那么p2的回调函数就会等待p1的状态改变;如果p1的状态是pending,那么p2的回调函数就会
    等待p1的状态改变;如果p1的状态已经是resolved或者rejected,那么p2的回调函数将会立即执行。p1是一个Promise,3秒后
    变为rejected。p2的状态在1秒之后改变,resolve方法返回的是p1.由于p2返回的是另一个Promise,导致p2自己的状态无效了,
    由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)。又过了2秒,p1变为rejected,导致触发catch方法指定
    的回调函数

    Promise.prototype.then()
    Promise实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为Promise实例添加状态改变时的
    回调函数。前面说过,then方法的第一个参数resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数

    Promise.prototype.catch()
    Promise.prototype.catch方法是.then(null,rejection)或.then(undefined,rejection)的别名,用于指定发生错误的回调函数

    Promise.prototype.finally()
    finally方法用于指定不管Promise对象最后状态如何,都会执行的操作

    Promise.all()
    Promise.all(fangfa yongyu jiang duoge Promise
    shili ,baozhuang cheng yige xin de Promise实例

  • 相关阅读:
    当Django模型迁移时,报No migrations to apply 问题时
    django--各个文件的含义
    django--创建项目
    1013. Battle Over Cities (25)
    1011. World Cup Betting (20)
    1009. Product of Polynomials (25)
    1007. Maximum Subsequence Sum (25)
    1006. Sign In and Sign Out (25)
    1008. Elevator (20)
    1004. Counting Leaves (30)
  • 原文地址:https://www.cnblogs.com/dehenliu/p/12523491.html
Copyright © 2011-2022 走看看