phppromise技巧_深入解析ES6中的promise

文章目录 [+]

Promise工具是用于表示一个异步操作的终极状态（完成或失落败）以及其返回的值。

什么是同步，异步

phppromise技巧_深入解析ES6中的promise

同步任务会壅塞程序的实行，如alert，for

（图片来自网络侵删）

异步任务不会壅塞程序的实行，如setTimeou

利用Promise，then，catch，finally

Promise.all 和 Promise.race

Promise.resolve 和 Promise.reject

回调与Promise

回调函数，用于要求数据

Promise

回调函数，用于要求数据

我自己是一名从事了多年开拓的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适宜2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

// 利用第三方库回调function method(fn) { // 回调 setTimeout(function() { // 回调 fn && fn(); // 有可以有bug，被多调用一次 fn && fn(); },1000);}// promise一旦被调用，成功或者是失落败后，就不能再被修正function method() { return new Promise(resolve => { setTimeout(function() { //成功 resolve(); // 再调用就不会实行 resolve(); },1000); });}

// 掌握反转function method(fn) { setTimeout(function() { // 实行回调 fn && fn.call({a:1, b:2)}; // 改变指向 },1000);}function method(fn) { return new Promise(resolve => { setTimeout(() => { resolve(); },1000); });}缺点处理

hen(resolve, reject)

then方法中的第二个回调，是失落败的时候要做的事情

catch

利用实例的then方法，可以捕获缺点

finally

不论成功与否，finally中的内容一定会实行

function fn(val) { return new Promise((resolve, reject) => { if(val) { resolve(); // 成功的时候 } else { reject(); // 失落败的时候 } });}

catch会捕获缺点，如果在回调中没有对缺点进行处理

fn(true) .then(data => { console.log(data); return fn(false); }) .then( () => { console.log('da'); // 不会实行，没处理缺点 }) .then( () => { }) .catch(e => { console.log(e); return fn(false); }); // 直接输出到这不能担保catch被实行

如果没有对失落败做出处理，会报错

fn(true) .then(data => { console.log(data); return fn(false); }) .catch(e=> { // 捕获缺点 console.log(e); return fn(false); }) .finally( () => { console.log(100); });Promise的三种状态

pending为进行中的状态，fulfilled为成功的状态，rejected为失落败的状态。
状态的改变时不可返的，一旦决议就不能修正（决议，状态的改变为决议），状态只能从pending到fulfilled，或者，从pending到rejected。

Promise.all方法可以把多个promise的实例包装成一个新的promise实例

Promise.all( [promise1, promise2] ) : Promise数组中，如果promise都为true，则返回为true，决议为成功如果数组中有一个为promise，那么返回的是false，决议为失落败如果是一个空数组，那么返回为true，决议为成功

模式多个要求的数据

第一条数据加载成功第二条数据加载成功第三条数据加载成功

不用Promise.all

调用

getData1();getData2();getData3();getData4();

Promise.race([promise1, promise2]) : Promise

Promise.resolve() 与 Promise.reject()

// Promise.resolve通报一个普通的值let p1 = new Promise(resolve => { resolve('成功!');});let p2 = Promise.resolve('成功!');// 通报一个promise实例let pro = new Promise(resolve => { resolve('da');});let p = Promise.resolve(pro);p.then(data => void console.log(data));

let obj = { then (cb) { console.log('da'); da('dada'); }, method() { console.log('coding'); }}// 立即实行Promise.resolve(obj).then(data => { console.log(data);});

Promise异步：

console.log(1);let p = new Promise(resolve => { console.log(2); resolve(); console.log(3);});console.log(4);p.then(()=>{ console.log(5);});console.log(6);// 123465

Promise改进了传统回调造成的代码难掩护，掌握反转等问题，promise是异步的，如果all吸收的是空数组，立时会被决议为成功，如果race接管的是空数组，那么会被永久挂起，无限捕获缺点问题。

resove和reject方法：

如果吸收的是普通的值，那么就会立即决议为成功，并添补这个值，如果吸收的是一个promise实例，那么返回这个promise实例，如果吸收的是个thenable工具，则会把它包装成promise工具，并立即实行这个工具的then方法，reject会产生一个决议失落败的promise并直接通报值。

JavaScript/ES6 Promise

JavaScript的Promise代表一个操作的结果还没有结果，便是如网络要求操作，当我们从某个数据源获取数据的时候，没有办法确定它什么时候能够返回，接管到相应。

Promise供应标准

doSomething() .then(doSomethingElse) .catch(handleError) .then(doMore) .then(doFinally) .catch(handleAnotherError)

创建Promise

一个Promise利用Promise布局器创建，接管两个参数resolve，reject

var promise = new Promise( function(resolve, reject) { // new Promise resolve() reject()}

XMLHttpRequest的promise版本：function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { if(req.status == 200) { resolve(req.response); }else{ reject(Error(req.statusText)); } }; req.onerror = function() { reject(Error("Network Error")); }; req.send(); }); }

利用Promise

get(url) .then(function(response) { },function(err) { })

处理缺点：

get(url) .then(function(response){ }, undefined) .then(undefined, function(err){ })

get(url) .then(function(response){ }) .catch(function(err){ })

链式

get(url) .then(function(response){ response = JSON.parse(response); var secondURL = response.data.url return get(secondURL); }) .then(function(response){ response = JSON.parse(response); var thirdURL = response.data.url return get(thirdURL); }) .catch(function(err){ handleError(err); });

并行实行Promise

Promise.all()方法每个promise数组成为则决议为成功，如果数组中有任意一个promise为失落败则决议为失落败。

任务一，任务二，任务三，.then() -> success 任务成功

ES6

Promise工具用于表示一个异步操作的终极状态，以及其返回的值。

语法：

new Promise(function (resolve, reject) {});

几种状态：

pending初始状态，既不是成功，也不是失落败状态；fulfilled意味着操作成功完成；rejected意味着操作失落败。

pending状态的Promise工具可能会触发filfilled状态，并通报一个值给相应的状态处理方法，也可能触发失落败状态rejected并通报失落败信息。

Promise.all(iterable)

这个方法返回一个新的promise工具，该promise工具在itearable参数中，当里面所有的的promise工具决议成功的时候才触发成功，否则里面如何一个promise工具决议失落败的时候，立即触发promise工具的失落败。

Promise.all方法常用于处理多个promise工具的状态凑集。

Promise.race(iterable)

当iterable参数里的任意一个子promise被决议成功或者是决议失落败后，父promise会用子promise的成功返回值，或是失落败返回。

Promise.reject(reason)

返回一个状态为失落败的promise工具，将给定的失落败信息通报给对应的处理方法。

Promise.resolve(value)

返回一个状态为失落败的promise工具，将给定的失落败信息通报给对应的处理方法。

const myPromise = new Promise( (resolve, reject) => { resolve('resolve'); // filfilled reject('reject'); // rejected});

function myFunction(url) { return new Promise( (resolve, reject) => { xhr.open ("GET", url); xhr.onload = () => resolve(xhr.responseText); xhr.onerror = () => reject(xhr.statusText); xhr.send(); });};

当异步代码实行成功的时候，会调用resolve()，当异步代码实行失落败的时候，会调用reject()。

仿照异步代码：

setTimeout(function(){ resolve('成功');},250);});myPromise.then(function(successMsg){});ES6 Promise工具

Promise工具是异步编程的一种办理方案，语法上，Promise是一个工具，从它那可以获取异步操作的信息。

Promise的状态，promise异步操作有三种状态，pending(进行中)，fulfilled（已成功），reject（已失落败）。
除了异步操作的结果，任何其他操作都是无法改变这个状态。

缺陷，一旦建立Promise就会立即实行，无法中途取消，如果不设置回调函数，Promise内部会抛出错误，不会反应到外部。

then方法，吸收两个函数作为参数。

第一个参数是 Promise 实行成功时的回调，第二个参数是 Promise 实行失落败时的回调，两个函数只会有一个被调用。

const p = new Promise(function(resolve,reject){ resolve('success');}); p.then(function(value){ console.log(value);}); console.log('first');// first// success

then方法将返回一个resolved或是rejected状态的Promise工具用于链式调用。

热Promise

在JavaScript中，所有代码都是单线程的，也便是同步实行的，promise便是为了供应一个办理方案的异步编程。

promise的特点：只有异步操作可以决定当前处于的状态，并且任何其他操作无法改变这个状态；一旦状态改变，就不会在变。

状态改变的过程：从pending变为fulfilled和从pending变为rejected，状态改变后，就不会在改变了，这就叫已定型resolved

用法：

Promise工具是由关键字new及其布局函数来创建的。

const promise = new Promise((resolve, reject) => { // do something here ... if (success) { resolve(value); // fulfilled } else { reject(error); // rejected }});

函数吸收两个函数作为参数，分别是resolve和reject，当异步操作实行成功后，会将异步操作的结果作为参数传入resolve函数并实行，此时的状态由Promise状态从pending变为fulfilled；而失落败会将异步操作的缺点作为参数传入reject函数并实行，此时Promise工具状态从pending变为rejected。

通过then方法，将指定resolved状态和rejected状态的回调函数。

promise.then(function(value) { // success }, function(error) { // failure });

Promise.all(iterable)，iterable必须是一个可以迭代的工具，如Array

返回值为一个新的Promise实例。

Promise.race(iterable)，同理，返回值为一个新的Promise实例。

返回的新实例状态，会是最先改变状态的那个实例，如果不是Promise实例，先用Promise.resolve方法，如果传入的迭代为空，则返回的Promise永久等待。

一个Promise实例原封不动的返回该实例；

var original = Promise.resolve('第二行');var da = Promise.resolve(original);da.then(function(value) { console.log('value: ' + value);});console.log('original === da ? ' + (original === da));// "original === da ? true"// "value: 第二行"

跟随这个thenable工具的，采取它的终极状态；

let thenable = { then: function(resolve, reject) { resolve(41); }}let p = Promise.resolve(thenable);p.then(function(value) { console.log(value);}) // 41

直接将传入参数当终极结果，并返回一个新的Promise；

let p = Promsie.resolve(12);p.then(function(number) { console.log(number);})// 12

直接返回一个resolved状态的Promise工具

let p = Promsie.resovle();p.then(function() { // do something })

Promise.prototype.then()

p.then(onResolve, onReject);p.then(function(value) { }, function(reason) {});

Promise.prototype. catch()

p.catch(onReject) p.catch(function(reason) { });

// badpromise .then(function(data) { // success }, function(err) { // error });// goodpromise .then(function(data) { // success }) .catch(function(err) { // error });

Promise.prototype. finally()

p.finally(onFinally); p.finally(function() { })

该回调函数的不接管任何参数

promise是一个工具，代表一个异步操作，有三种状态，进行中，成功，失落败。
只有异步操作的结果的可以决定当前是哪种状态，promise一旦新建实行，就没有办法中途停滞。

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
只有当作为参数所有的promise函数运行完毕，才会实行.then回调。

//以往回调办法函数1(function(){ //代码实行...(ajax1) 函数2(function(){ //代码实行...(ajax2) 函数3(function(data3){ //代码实行...(ajax3) }); ... });});//Promise回调办法:链式调用,可构建多个回调函数。
promise().then().then()...catch()

//创建Promise实例let promise = new Promise( (resolve, reject) => { //实行相应代码根据情形调用resolve或reject ...})//promise的then方法中实行回调promise.then(function(){ //第一个参数是返回resolve时 },function(){ //第二个是回调返回reject时 }}

定时器调用

const promise = new Promise(function(resolve, reject){ setTimeout(resolve,1000);})promise.then(function(){ console.log('resolve:成功回调函数') },function(){ console.log('reject:失落败回调函数')})

通报参数：

const promise = new Promise((resolve, reject) => { setTimeout(reject,1000,'我是value值');})promise.then((value) => { console.log('resolve:' + value)}).catch((value) => { console.log('reject:'+ value)})

//第一种,单个传值是无效的const promise = new Promise((resolve, reject) => { setTimeout(resolve,1000,'参数1','参数2');})promise.then((value1,value2) => { console.log('value1:' + value1) //value1:参数1 console.log('value2:' + value2) //value2:undefined}).catch((value) => { console.log(value)})//第二种:数组传值const promise = new Promise((resolve, reject) => { setTimeout(resolve,1000,['参数1','参数2']);})promise.then((value1) => { console.log('value1:' + value1) //value1:参数1,参数2}).catch((value) => { console.log(value)})

Promise.prototype.then方法：链式操作

getJSON("/posts.json").then(function(json) { return json.post;}).then(function(post) { // proceed});

Promise.prototype.catch方法：捕捉缺点

getJSON("/posts.json").then(function(posts) {}).catch(function(error) { console.log('发生缺点！
', error);});

Promise.all方法，Promise.race方法

var p = Promise.all([p1,p2,p3]);

var p = Promise.race([p1,p2,p3]);

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您创造，真是慧眼识英！
也感谢您的关注，在未来的日子里，希望能够一贯默默的支持我，我会分享出更多精良的作品。
我们一起发展，从零根本学编程，将 Web前端领域、数据构造与算法、网络事理等普通易懂的呈现给小伙伴。
分享 Web 前审察干的技能文章、工具资源、精选课程、热点资讯。

原文链接：https://mp.weixin.qq.com/s/V8zasJWaeyknrlnJuxp3xg作者：达达前端小酒馆