Promise 对象

概述

Promise是异步编程的一种解决方案

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

Promise对象有两个特点：

对象的状态不受外界影响。有三种状态：
1. pending：进行中
2. fulfilled：已成功（resolved）
3. rejected：已失败
一旦状态改变，就不会再该变，任何时候都可以得到这个结果

状态的缺点:

无法取消 Promise ，一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部
当处于 pending 状态时，无法得知目前进展到哪一个阶段（不知道是刚刚开始还是即将完成）

Promise解决异步的优点

回调地狱：某个异步操作需要等待之前的异步操作完成，无论回调是事件还是其他函数，都会陷入不断的嵌套（简单来说就是无数的嵌套函数）

Promise的出现，可以将异步操作以同步的流程表达出来，很好的解决了回调地狱

基本用法

Promise对象是一个构造函数，该函数有两个参数：

resolve：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
reject：在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

const p = new Promise(function(resolve,reject){console.log('one');resolve('three');
});p.then(resolve => {console.log(resolve);
}, err => {console.log(err);
});console.log('tow');

Promise 新建后就会立即执行

then方法

Promise实例生成以后，可以用``分别指定resolved状态和rejected状态的回调函数

该方法的两个参数：

回调函数是Promise对象的状态变为resolved时调用（必须）
回调函数是Promise对象的状态变为rejected时调用（可选）

Promise对象实现的 Ajax 操作

const ajax = function(url) {return new Promise(function(resolve, reject){const xml = new XMLHttpRequest();xml.open("GET", url, true);xml.onreadystatechange = function() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.responseText);} else {reject(new Error(this.statusText));}};xml.send();});
};ajax("data.json").then(res => {console.log(res);return res;
}).catch(err => {console.log(err);
})
.then(function(res) {console.log(res);
})

Promise对象实现的图片加载

const getImage = function (path) {return new Promise((resolve, reject) => {const img = new Image();img.onload  = resolve;img.onerror = reject;img.src = path;});
};

方法

方法|用途
:–|:–|:–
Promise.prototype.then(resolved[,rejected])|为Promise实例添加状态改变时的回调函数
Promise.prototype.catch(rejection)|用于指定发生错误时的回调函数(只要Promise方式错误就可以捕获)
Promise.prototype.finally()|用于指定不管 Promise 对象最后状态如何，都会执行的操作(ES2018)
Promise.all([new Promise,…])|这个方法会返回一个新的promise对象，如果里面所有的promise对象都成功才会触发，一旦有一个失败，则该promise对象为失败
Promise.race([new Promise,…])|当参数中的任意一个promise对象完成时候，就马上回去使用完成的这个promise对象的结果，不管这个结果成功还是失败
Promise.allSettled([new Promise,…])|这个方法会返回一个新的promise对象，只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束(ES2020)
Promise.resolve([*])|将现有对象转为 Promise 对象
Promise.reject(reason)|返回一个新的 Promise 实例，该实例的状态为rejected
Promise.try()|类似于try{}异常处理机制

方法详解

看这期前可以先查看：JavaScript异步和渲染过程

Promise回调地狱的拯救者相关推荐

使用ES6的Promise完美解决回调地狱
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...
语言解决猜神童年龄的问题_JavaScript语言基础：Promise是如何解决回调地狱问题的？...
链接:https://juejin.im/post/5aa1fce051882555677e21aa 众所周知的,Javascript是一种单线程的语言,所有的代码必须按照所谓的"自上而下& ...
解决异步问题，教你如何写出优雅的promise和async/await，告别callback回调地狱！
解决异步问题--promise.async/await 一.单线程和异步 1.单线程是什么 2.为什么需要异步 3.使用异步的场景二.promise 1.promise的三种状态 2.三种状态的表现 ...
使用promise解决回调地狱_「每日一题」Promise 是什么？
window.Promise 已经是 JS 的一个内置对象了. 1. Promise 有规格文档吗? 2. 你一般如何使用 Promise. ----------- 目前的 Promise 都遵循 P ...
vue页面取ajax返回值,Vue前端交互模式、Promise用法（回调地狱）
Promise 概述Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息. 优点:可以避免多层异步调用嵌套问题(回调地狱) Promise 对象 ...
Promise学习——解决回调地狱问题
Promise promise 容器概念: callback hell(回调地狱): 文件的读取无法判断执行顺序(文件的执行顺序是依据文件的大小来决定的)(异步api无法保证文件的执行顺序) var ...
Promise使用，return的运用，解决回调地狱
Promise使用,return的运用,解决回调地狱回调地狱 httpBookModel.getHotList().then((res) => {console.log(res)httpBoo ...
ES6（三）——回调地狱和promise异步任务顺序执行（传参、错误处理）
文章目录方法一.回调函数(回调地狱) 方法二:promise 2.1异步任务传参(单个) 2.2异步任务传参(多个) 2.3 错误处理 2.4 Promiss对象三大状态: (学名) 2.5 Pro ...
Promise解决回调地狱写法
这里可以使用Promise来解决回调地狱的问题! 那么我们这里有一个需求,就是我们需要读取三个 .txt 文件,需要第一个文件读取完成后才能读取第二个文件以此类推. 那么这里来一个Promise的错误 ...

Promise回调地狱的拯救者