1、为什么需要Promise

需求

通过AJAX请求id ,再根据id请求用户名.再根据用户名,再根据用户名获取email

回调地狱

回调函数中嵌套回调，Promise的出现主要解决了回调地狱。

Promise 的基本使用

语法

一个构造函数，然后参数是一个函数，函数中有两个行参，resolve, reject

new Promise(( resolve, reject ) =>{})

• Promise接受一个函数作为参数
• 在参数函数中有两个形参
  • resolve: 成功函数
  • reject: 失败函数
• 返回一个promise对象

Promise实例

promise实例有两个属性

• state: 状态
• result: 结果

Promise的状态

• 第一种状态: pending（准备、待解决、进行中）
• 第二种状态: fulfilled （已完成、成功）
• 第三种状态: rejected（已拒绝、失败）

Promise的状态的改变

通过调用resolve()和reject() 改变当前promise对象的状态

// 示例1
const p = new Promise((resolve, reject) => {// resolve(): 调用函数, 使当前Promise对象的状态改成fulfilledresolve();
})
console.dir(p) // fulfilled

// 示例2
const p = new Promise((resolve, reject) => {// resolve(): 调用函数, 使当前Promise对象的状态改成fulfilled// reject(): 调用函数, 使当前Promise对象的状态改成rejected// resolve();reject()
})
console.dir(p) 

• resolve(): 调用函数, 使当前Promise对象的状态改成fulfilled
• reject(): 调用函数,使当前Promise对象状态改成rejected

Promise状态的改变是一次性的！

Promise 的结果

// 示例
const p = new Promise((resolve, reject) => {// 通过调用 resolve,传递参数,改变 当前Promise对象的结果resolve("成功的结果");// resolve();// reject("失败的结果")
})
console.dir(p)

Promise的方法

then方法

实例1

const p = new Promise((resolve, reject) => {// 通过调用 resolve,传递参数,改变 当前Promise对象的结果// resolve("成功的结果");reject("失败的结果")
})// .then方法包含两个参数，两个参数都是函数，一个成功时执行，一个失败时执行
// 返回值: 是一个Promise对象
p.then(()=>{// 当Promise的状态使fulfilled时执行console.log("成功的回调")
},()=>{// 当Promise的状态时rejected时, 执行console.log("失败时调用")
})
console.dir(p) 

实例2

const p = new Promise((resolve, reject) => {// 通过调用 resolve,传递参数,改变 当前Promise对象的结果// resolve(123);reject("失败的结果")
})//then方法函数
// - 参数
// 两个参数都是函数
// 返回值: 是一个Promise对象
p.then((value)=>{//当Promise的状态使fulfilled时执行console.log("成功的回调",value)
},(err)=>{// 当Promise的状态时rejected时, 执行console.log("失败时调用",err)
})
console.dir(p) 

• 在then方法的参数函数中,通过形参使用Promise对象的结果

then方法返回一个新的Promise实例,状态是pending

在then方法中,通过return将返回的Promise实例改为fulfilled状态

// 如果Promise的状态不改变,then里的方法不会执行
const p = new Promise((resolve, reject) => {resolve()
})
const t = p.then((value) => {console.log("成功")// 使用return可以将t实例的状态改为fulfilledreturn 123
},(reason) => {
console.log("失败")
})
t.then.((value) => {console.log("成功2",value)
},(reason) => {
console.log("失败2")
})

在then方法中,出现代码错误,将返回的Promise实例改为rejected状态

// 如果Promise的状态不改变,then里的方法不会执行
const p = new Promise((resolve, reject) => {})
const t = p.then.((value) => {console.log("成功")// 使用return可以将t实例的状态改为fulfilled// return 123
},(reason) => {// 如果这里代码出错,会将t实例的状态改为rejected
console.log("失败")
})
t.then.((value) => {console.log("成功2",value)
},(reason) => {
console.log("失败2")
})

catch方法

实例：

const p = new Promise((resolve, reject) => {// reject()// console.log(a)throw new Error("出错了");
})// 思考: catch中的参数函数在什么时候被执行，两种情况：
//  1. 当Promise的状态改为rejcted.被执行
//  2. 当Promise执行过程出现代码错误时,被执行
p.catch((reason => {console.log("失败", reason)
})
console.log(p);

参考：
深入浅出promise
手写promise
笔记
promise-阮一峰