深入理解es6-Promise对象

    在之前翻博客时,看到promise,又重读了一边,突然发现理解很浅,记的笔记也不是很好理解,又重新学习promise,加深理解,学以致用
    在promise出来之前,js常用解决异步方式都是采用回调函数方式,但是如果需求过多,会形成一系列的回调函数,俗称:回调地狱。导致后期阅读和维护代码特别麻烦。所以es6的Promise就是为了解决这个麻烦而出来的新对象,之前早就存在,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象

定义

Promise对象是为了简化异步编程。解决回调地狱情况。
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。重点是取决与这个事件之后的一系列动作,then()或catch()的等等。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise对象用于延迟(deferred) 计算和异步(asynchronous ) 计算。一个Promise对象代表着一个还未完成,但预期将来会完成的操作。这样表示了一旦用了promise对象,就不能退出,直到出现结果为止(resloved或rejected)
Promise是一个对象,可以用构造函数来创建一个Promise实例。

let promise = new Promise((resolve, reject) =>{ // .... some coding if (true){ // 异步操作成功 resolve(value); } else { reject(error); } }) promise.then(value=>{ // 成功的回调函数 }, error=>{ // 失败后的回调函数 }) console.log(typeof promise) // object 参数解释

params:传参是一个回调函数。这个回调函数有两个参数resolve和reject。

resolve: 将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。(简单来说就是成功了的执行)

reject: 将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。(简单来说就是失败了的执行)

promise之后then的参数:

第一个参数是成功的回调函数,必选

第二个参数是失败的回调函数,可选

// 成功时 let promise = new Promise((resolve, reject) =>{ console.log('开始') if (2 > 1){ // 异步操作成功 resolve({name:'peter',age:25}); } else { reject(error); } }) promise.then(value=>{ // 成功的回调函数 console.log(value) }, error=>{ // 失败后的回调函数 console.log(error) }) // 开始 // {name: "peter", age: 25} // 失败时 let promise = new Promise((resolve, reject) =>{ console.log('开始') if (2 > 3){ // 异步操作成功 resolve(a); } else { reject('未知错误'); } }) promise.then(value=>{ // 成功的回调函数 console.log(value) }, error=>{ // 失败后的回调函数 console.log(error) }) // 开始 // 未知错误

ps:Promise实例化一个对象后,会立即实行。

new Promise((resolve, reject)=>console.log('promise')); console.log('123'); // promise // 123

这个结果发现,先执行promise后执行123。

Promise的特点

对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

一旦状态改变,就不会再变,任何时候都可以得到这个结果。就是成功了就一直是成功的状态fulfilled,失败一直是失败的状态rejected。

如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的

promise先按顺序实行完promise实例中方法再实行then中的resolve或者reject。

let promise = new Promise((resolve, reject)=>{ console.log('promise') if (2 > 1){ // 异步操作成功 resolve({name:'peter',age:25}); } else { reject(error); } console.log('end') }) promise.then( value=>{ console.log(value) }, error=>{ console.log(error) } ) // promise // end // {name: "peter", age: 25}

ajax是最常见的异步操作方式,那么用promise封装Ajax的例子

const getJSON = function (url) { const promise = new Promise(function (resolve, reject) { const handler = function () { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; const client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send(); }); return promise; }; getJSON("xxxxx").then(function (value) { console.log('Contents: ' + value); }, function (error) { console.error('出错了', error); }); Promise方法 promise.then()

then() 为 Promise 实例添加状态改变时的回调函数,上面已经提起过。
params解释:

第一个参数是resolved状态的回调函数, 必选

第二个参数是rejected状态的回调函数, 可选

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjxdp.html