Promise详解：Promise解决ajax回调嵌套问题 - 详解

目录

一、Promise是什么

二、回调地狱

三、Promise解决回调地狱的原理

四、promaise实例

---

一、Promise是什么

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

4、可以在对象之间传递和操作promise，帮助我们处理队列

二、回调地狱

当一个回调函数嵌套一个回调函数的时候，就会出现一个嵌套结构，当嵌套的多了就会出现回调地狱的情况， 比如我们发送三个 ajax 请求，第一个正常发送，第二个请求需要第一个请求的结果中的某一个值作为参数，第三个请求需要第二个请求的结果中的某一个值作为参数，回调地狱，其实就是回调函数嵌套过多导致的。

ajax({
url: '我是第一个请求',
success (res) {
// 现在发送第二个请求
ajax({
url: '我是第二个请求'，
data: { a: res.a, b: res.b },
success (res2) {
// 进行第三个请求
ajax({
url: '我是第三个请求',
data: { a: res2.a, b: res2.b },
success (res3) {
console.log(res3) ;
// ...
}
})
}
})
}
})

三、Promise解决回调地狱的原理

下面就带大家创建一个Promise对象

let p1 = new Promise(function (resolve, reject) {
// 此处执行异步的代码
setTimeout(()=>{
// 我们可以根据自己的标准在异步任务完成的时候
// 选择是执行失败的回调函数还是成功的回调函数
// 第一个形参resolve 表示成功的回调
resolve('300')
// 第二个形参reject 表示失败的回调
},3000)
})
// 定义当p1这个promise对象变成成功状态的时候要执行的回调函数
p1.then((data)=>{
console.log("我是成功的时候执行的函数")
console.log("我执行的时候你给我传入的参数",data)
})
// 定义当p1这个promise对象变成失败状态的时候要执行的回调函数
p1.catch((err)=>{
console.log("我是失败的时候执行的函数")
console.log("我执行的时候你给我传入的参数",err)
})

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise是一个对象，这个对象有三个状态:

待定(pending)：初始状态，既没有成功，也没有失败，表示异步任务正在进行中

成功(fulfilled):异步任务执行完毕,变成成功状态

失败(rejected):异步任务执行完毕,变成失败状态

当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；

promise状态一经改变，不会再变

Promise对象的状态改变，只有两种可能：

从pending变为fulfilled

从pending变为rejected

Promise对象这样就创建好了，下面来解决ajax回调地狱问题。

四、promaise实例

传统写法

const fs = require("fs")
fs.readFile("./one.txt", (err, data1) => {
fs.readFile("./two.txt", (err, data2) => {
fs.readFile("./three.txt", (err, data3) => {
console.log(data1 + "\n" + data2 + "\n" + data3)
})
})
})

Promise写法

const fs = require("fs")
const p = new Promise((resolve, reject) => {
fs.readFile("./one.txt", (err, data) => {
resolve(data)
})
})
p.then(value => {
return new Promise((resolve, reject) => {
fs.readFile("./two.txt", (err, data) => {
resolve([value, data])
})
})
}).then(value => {
return new Promise((resolve, reject) => {
fs.readFile("./three.txt", (err, data) => {
value.push(data)
resolve(value)
})
})
}).then(value => {
let str = value.join("\n")
console.log(str)
})