Promise的基本使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

1.为什么需要Promise？

需求

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

回调地狱

回调函数中嵌套回调
Promise解决了回调地狱

2.Promise的基本使用

语法

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

• Promise接受一个函数作为参数
• 在参数函数中有两个参数（两个参数均为函数）
  • resolve：成功函数
  • reject：失败函数

Promise实例

Promise实例有两个属性

• state：状态
• result：结果

2.1 Promise的状态

• 第一种状态：pending —— 准备中（默认状态）
• 第二种状态：fulfilled —— 已完成 / 成功
• 第三种状态：rejected —— 已拒绝 / 失败

2.2 Promise状态的改变

代码如下（示例1）：

const p = new Promise((resolve, reject) => {
//没有调用resolve函数或者reject函数时，Promise默认状态为pending
})
console.dir(p) 

运行结果如下：

代码如下（示例2）：

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

运行结果如下：

代码如下（示例3）：

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

运行结果如下：

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

注意：Promise状态的改变是一次性的。即改完状态之后不能改成其他状态

const p = new Promise((resolve, reject) => {
//resolve()执行之后state改为fulfilled,之后reject()无法更改状态。反之亦然
  resolve()
  reject()	//无效
})
console.dir(p) //state为fulfilled

运行结果：

2.3 Promise的结果

通过调用 resolve或者reject,传递参数,改变当前Promise对象的结果
不调用的情况下默认是 undefined

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

运行结果如下：

---

3.Promise的方法

3.1 then方法

• 参数 ：两个参数都是函数，因状态而执行不同的函数
• 返回值：一个Promise对象

const p = new Promise((resolve, reject) => {
  // resolve("成功的结果");
  reject("失败的结果")
})

// .then方法函数
// 参数
// 两个参数都是函数
// 返回值: 是一个Promise对象
const newP = p.then(()=>{
  // 当Promise的状态使fulfilled时执行
  console.log("成功的回调")
},()=>{
  // 当Promise的状态时rejected时, 执行
  console.log("失败时调用")
})
console.dir(newP) 

运行结果如下：

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

const p = new Promise((resolve, reject) => {
  reject("失败的结果为123")
})
p.then((value)=>{
  //当Promise的状态使fulfilled时执行
  console.log("成功的回调",value)
},(err)=>{
  // 当Promise的状态时rejected时, 执行
  console.log("失败时调用",err)
})
console.dir(p) 	//失败时调用 失败的结果为123

如果Promise的状态为pending,then里的方法不会执行

const p = new Promise((resolve, reject) => {

})
p.then((value)=>{
  //当Promise的状态使fulfilled时执行
  console.log("成功的回调",value)
},(err)=>{
  // 当Promise的状态时rejected时, 执行
  console.log("失败时调用",err)
})
console.dir(p) //state为pending，result为 undefined，then没有执行

then方法返回一个新的Promise实例,根据返回结果判断状态

• 参数函数里面有 返回结果是 非promise类型的 属性 或者 没有return（默认return undefined）,Promise实例状态为fulfilled

const p = new Promise((resolve, reject) => {
  resolve("成功的结果")
})

const p1 = p.then(value => {        //接受p成功的回调
            return 'sjw'    
        }, reason => { });
console.dir(p1);     //输出p1这个promise对象

• 如果回调函数的返回结果是promise对象，则p1的状态就取决于return返回的这个promise对象内部的状态，内部为resolve, 则p1状态为fulfilled，内部为reject，则p1状态为rejected

const p1 = p.then(value => {
            return new Promise((resolve, reject) => {
                reject('出错了')
            })
        }, reason => { });
        console.log(p1);   //结果为rejected

• 第三种情况为抛出错误，则p1状态为rejected，返回的结果就是你抛出的值

const p1 = p.then(value => {
            // throw new Error('出错了');
            throw '出错了';    //没有return，直接抛出错误
        }, reason => { });
        console.log(p1);

---

3.2 catch方法

catch中的参数函数执行情况：

• 当Promise的状态改为rejcted.被执行
• 当Promise执行过程出现代码错误 / 抛出错误 时,被执行

const p = new Promise((resolve, reject) => {
	// reject()
  // console.log(a)
  throw new Error("出错了");
})

p.catch((reason => {
	console.log("失败", reason)
})
console.log(p);

3.3 方法的联合使用

根据Promise的状态选择执行 then / catch

new Promise((resolve, reject) => {
//执行函数
}).then((value) => {
	//成功时被执行
	console.log(value)
}).catch((reason) => {
	//失败时被执行
	console.log(reason)
})

---

参考

视频: https://www.bilibili.com/video/BV1454y1R7vj?p=10
视频作者: 杰哥课堂(B站)

如有错误，望指正，万分感谢。