Promise

1.为什么需要Promise

• 回调地狱

  回调函数中嵌套回调

  Promise解决了回调地狱

2. Promise 的基本使用

• 语法

new Promise(( reslove, reject ) =>{
    resolve('唐伟真');
    //reject('杨松');
})

• Promise接受两个函数作为参数

• • resolve: 成功函数
  • reject: 失败函数

• Promise实例

  promise实例有两个属性

  1. state: 状态

     state的三个值分别为：

     • pending：new promise后就是pending（进行中）
     • fulfilled：执行成功
     • rejected：执行失败

  2. result: 结果

1) Promise状态的改变

• 示例1

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

• 示例2

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

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

Promise状态的改变是一次性的，即执行了resolve函数后就不会执行reject函数了

2) Promise 的结果

• 示例

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

3. Promise的方法

1) then方法

then方法的注意点：

1. then方法有两个回调函数（成功回调函数，失败回调函数）
2. then方法会返回一个新的promise对象，且state为pending
3. Promise的状态不改变,不会执行then里的方法
4. 在then方法中,通过return将返回的Promise实例改为fulfilled状态
5. 在then方法中,出现代码错误,将返回的Promise实例改为rejected状态

• 示例1

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

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

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

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

const p = new Promise((resolve, reject) => {
  //通过调用reslove,传递参数,改变 当前Promise对象的结果
  //reslove(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)
  })