系列文章目录

文章目录

系列文章目录
前言
一、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]]的值

三.总结

对于勇士来说，贫并困窘、责难、诽谤、冷嘲热讽……，一切压迫都是前进的动力。

异步处理-Promise解决回调地狱相关推荐

promise解决回调地狱（callback hell）
promise解决回调地狱(callback hell) 具体参考阮一峰,ES6标准入门在我们需要对一个异步操作进行频繁的调用的时候,且要保证一步操作的顺序,可能会出现回调地狱(callback ...
Promise的基础使用与生成器配合Promise解决回调地狱
经过几天对Promise的了解,希望可以帮助到大家. 什么是回调地狱说起回调地狱首先想到的是异步在js中我们经常会大量使用异步回调,常用的ajxa请求来看下面这段代码: fun ...
Promise(解决回调地狱)
Promise() 对象: 存在三种状态: //进行时 pending// 成功 resolve//失败 reject 执行语句: let promise= new Promise((resolve, ...
promise解决回调地狱的问题
什么是回调地狱怎么解决回调地狱的问题要了解什么是回调地狱,首先要了解什么是同步,什么是异步函数同步函数:当一个函数是同步执行时,那么当该函数被调用时不会立即返回,直到该函数要做的事情全部做完之 ...
Promise解决回调地狱
一.Promise是什么 Promise 其实是异步编程的一种解决方案.简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,可以从 ...
Promise解决回调地狱写法
这里可以使用Promise来解决回调地狱的问题! 那么我们这里有一个需求,就是我们需要读取三个 .txt 文件,需要第一个文件读取完成后才能读取第二个文件以此类推. 那么这里来一个Promise的错误 ...
node js Bluebird 简单介绍 promise 解决回调地狱
Promise是异步代码实现控制流的一种方式.这一方式可以让你的代码干净.可读并且健壮. 异步回调如下: fs.readFile('directory/file-to-read', function( ...
使用promise解决回调地狱_「每日一题」Promise 是什么？
window.Promise 已经是 JS 的一个内置对象了. 1. Promise 有规格文档吗? 2. 你一般如何使用 Promise. ----------- 目前的 Promise 都遵循 P ...
异步API中promise解决回调地狱问题和异步函数async终极解决方案
使用promise解决回调地狱_使用Promise 解决回调地狱
const fs = require('fs') function getFileByPath(fpath) { return new Promise(function (resolve, rejec ...

异步处理-Promise解决回调地狱