Promise 详解

Promise
1.为什么需要Promise
需求
通过AJAX请求id ,再根据id请求用户名.再根据用户名,再根据用户名获取email
回调地狱
回调函数中嵌套回调
Promise解决了回调地狱

2. Promise 的基本使用
语法

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

●Promise接受一个函数作为参数
●在参数函数中有两个参数
○resolve: 成功函数
○reject: 失败函数
Promise实例
promise实例有两个属性
●state: 状态
●result: 结果

1) Promise的状态
第一种状态: pending
第二种状态: fulfilled
第三种状态: rejected

2) Promise状态的改变
示例1

const p = new Promise((resolve, reject) => {
    // resolve(): 调用函数, 使当前Promise对象的状态改成fulfilled
  resolve();
})
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状态的改变是一次性的

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

3. Promise的方法
1) 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

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) 

Promise的状态不改变,不会执行then里的方法

// 如果Promise的状态改变,then里的方法不会执行
const p = new Promise((resolve, reject) => {
  
}).then.((value) => {
    console.log("成功")
},(reason) => {
console.log("失败")
})
在then方法中,通过return将返回的Promise实例改为fulfilled状态

// 如果Promise的状态改变,then里的方法不会执行
const p = new Promise((resolve, reject) => {
  
})
const t = p.then((value) => {
    console.log("成功")
  // 使用return可以将t实例的状态改为fulfilled
  return 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")
})

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);

4.优化代码
示例

// 封装ajax请求
function getData(url, data = {}){
    return new Promise((resolve, reject) => {
      $.ajax({
      // 发送请求类型
        type: "GET",
      url: url,
      data: data,
      success: function (res) {
          // 修改Promise状态为成功, 修改Promise的结果res
        resolve(res)
      },
      error:function (res) {
          // 修改Promise的状态为失败,修改Promise的结果res
        reject(res)
      }
    })
  }
}

// 调用函数
getData("data1.json")
  .then((data) => {
      // console.log(data)
    const { id } = data
    return getData("data2.json", {id})
  })
  .then((data) => {
      // console.log(data)
    const { usename } = data
    return getData("data3.json", {usename})
  })
  .then((data) => {
      console.log(data)
  })

5.async和await
视频链接:46-async与await结合发送AJAX请求_哔哩哔哩_bilibili
视频作者:尚硅谷-李强(B站)

1) async 函数
1 函数的返回值为 promise 对象
2promise 对象的结果由 async 函数执行的返回值决定
示例

async function main(){
  // 1.如果返回值是一个非Promise类型的数据
  //  return 一个字符串 数字 布尔值等都是成功的Promise对象
  // 2. 如果返回的时一个Promise对象
  //  return new Promise((resolve, reject) => {
  //  resolve("OK") 返回的是成功Promise对象,状态值:[[PromiseState]]:"fulfilled"
  //  reject("Err") 返回的是失败Promise对象,状态值:[[PromiseState]]:"rejected"        
  // 3. 抛出异常
  throw "oh No" // 状态值:[[PromiseState]]:"rejected",结果是抛出的值
})
}
let result = main();
console.log(result);

返回值是一个Promise对象

2) await 表达式
1. await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
2. 如果表达式是 promise 对象, await 返回的是 promise 成功的值
3. 如果表达式是其它值, 直接将此值作为 await 的返回值

注意
1. await 必须写在 async 函数中, 但 async 函数中可以没有 await
2. 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

3) async和await结合
示例

const fs = require("fs");
const util = require("util");
const mineReadFile = util.promisify(fs.readFile);// promisify转换为Promise形态的函数

async function main(){
  // 捕获处理
    try{
      // 读取第一个文件的内容
    let data1 = await mineReadFile("./resource/1.html");
    let data2 = await mineReadFile("./resource/2.html");
    let data3 = await mineReadFile("./resource/3.html");
  }catch(e){
      console.log(e):    
  }
}