系列文章目录
文章目录
系列文章目录前言一、Promise是什么？二、如何避免回调地狱?2.1Promise基本语法2.2Promise的三种状态.2.2.1 状态运行代码示例2.2.2Promise的链式调用3.Promise的all方法使用三.总结前言
高山仰止，景行行止。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Promise是什么？
ES6中一个非常重要和好用的特性就是Promise
Promise是异步编程的一种解决方案。
那什么时候我们会来处理异步事件呢?
一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
但是，当网络请求非常复杂时，就会出现回调地狱。(多层嵌套,像深度递归)
注意！！Promise的返回值必须调用.then()才能获取[[PromiseResult]]的值
二、如何避免回调地狱?
2.1Promise基本语法
代码如下:(视频理解)
// 参数-->函数(resolve,reject)// resolve,reject本身又是函数// 链式编程new Promise((resolve,reject) => {//异步操作封装于PromisesetTimeout(() => {resolve();//调用resolve,就会自动调用下面的then()函数},1000)}).then(() => {//第一次模拟发送网络请求的代码console.log("hello world!");console.log("hello world!");console.log("hello world!");console.log("hello world!");return new Promise((resolve, reject) =>{setTimeout (() => {resolve()},1000)})}).then( () => {//第二次模拟发送网络请求的代码console.log("hello vuejs");console.log("hello vuejs");console.log("hello vuejs");console.log("hello vuejs");return new Promise( (resolve, reject) => {setTimeout( () => {resolve()},1000)})}).then( () => {//第三次模拟发送网络请求的代码console.log("hello python");console.log("hello python");console.log("hello python");console.log("hello python");})
2.2Promise的三种状态.
首先,当我们开发中有异步操作时,就可以给异步操作包装一个Promise
异步操作之后会有三种状态我们一起来看一下这三种状态:
pending :等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill:满足状态,当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
2.2.1 状态运行代码示例
new Promise((resolve, reject) => {setTimeout( () => {// 成功时调用resolve -> then// 失败时调用reject -> catchreject('error message')},1000)}).then((data) => {console.log("Hello World!");}).catch((err) => {console.log(err);})
2.2.2Promise的链式调用
链式一:
// 参数-->函数(resolve,reject)// resolve,reject本身又是函数// 链式编程new Promise((resolve,reject) => {//异步操作封装于PromisesetTimeout(() => {resolve();//调用resolve,就会自动调用下面的then()函数},1000)}).then(() => {//第一次模拟发送网络请求的代码console.log("hello world!");console.log("hello world!");console.log("hello world!");console.log("hello world!");return new Promise((resolve, reject) =>{setTimeout (() => {resolve()},1000)})}).then( () => {//第二次模拟发送网络请求的代码console.log("hello vuejs");console.log("hello vuejs");console.log("hello vuejs");console.log("hello vuejs");return new Promise( (resolve, reject) => {setTimeout( () => {resolve()},1000)})}).then( () => {//第三次模拟发送网络请求的代码console.log("hello python");console.log("hello python");console.log("hello python");console.log("hello python");})
3.Promise的all方法使用
视频讲解传送门
下方使用ajax模拟 多请求
//参数->可迭代对象//all会等待两个请求完毕.Promise.all([new Promise( (resolve, reject) => {$.ajax({url: 'url1',success: function (data) {resolve(data)}})}),new Promise( (resolve, reject) => {$.ajax({url: 'url2',success: function (data) {resolve(data)}})})]).then( results => {results[0]//返回保存的第一个请求results[1]//返回保存的第二个请求})
注意！！Promise的返回值必须调用.then()才能获取[[PromiseResult]]的值
