promise 学习笔记

1.回调地狱

使用ajax请求id ，再根据id请求用户名，再根据用户名请求email

定义：在回调函数中嵌套回调

通过promis解决回调地狱的问题

2.promise的使用

Promise语法：

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

• Promise接收一个函数作为参数，在函数中有两个参数
• resolve是一个函数
• reject是一个函数

Promise有两个属性

• state 状态
• result 结果

1.Promise状态

第一种准备状态 pending(准备,待解决)

第二种状态 fulfilled(已成功)

第三种状态：rejected(已拒绝，失败)

2.Promise状态的改变

通过调用Promise里面的函数resolve()和reject()就可以改变Promise状态

Promise状态改变是一次性的，只能调用一个函数

const p = new Promise((resolve, reject) => {
  //调用resolve函数  Promise状态变为fulfilled
  //调用reject函数，Promise状态变为rejected
  resolve();
  rejected();  
})
console.log(p);

3.Promise的结果

const p = new Promise((resolve, reject) => {
  //调用resolve函数  通过给函数中传递参数 可以改变Promise的结果
  resolve('成功')
})
console.log(p); //result 成功

3.Promise的方法

1.then方法

   const p = new Promise((resolve, reject) => {
      //调用resolve函数  通过给函数中传递参数 可以改变Promise的结果
      resolve('成功')
      // reject('失败')
    })
    console.log(p);
    // then方法中有两个参数，一个是函数，另一个也是函数 
    p.then(()=>{
      // 当Promise状态为fulfilled调用第一个函数
      console.log('成功时候被调用');
    },()=>{
      //当Promise状态为rejected时调用第二个函数
      console.log('reject时候被调用');
    })

then方法中有两个参数，一个是函数，另一个也是函数

1.1获取Promise的数据

给then方法函数里面一个形参来使用Promise对象的结果

const p = new Promise((resolve, reject) => {
  //调用resolve函数  通过给函数中传递参数 可以改变Promise的结果
  resolve('123')
  // reject('失败')
})
console.log(p);
// then方法中有两个参数，一个是函数，另一个也是函数 
p.then((value)=>{
  // 当Promise状态为fulfilled调用第一个函数
  console.log('成功时候被调用',value);
},(reson)=>{
  //当Promise状态为rejected时调用第二个函数
  console.log('reject时候被调用',reson);
})

then方法会返回一个新的Promise实例，而且Promise的状态是pending

1.2链式操作

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

---

Promise里面状态不改变，不执行函数

const p = new Promise((reolve, reject) => {
  reolve()
})


const t = p.then((value) => { 
  console.log('成功');
  return '123'
  // 如果这里代码出错就会改变Promise 状态为rejected
},(reson)=>{
  console.log('失败');
})


t.then((value)=>{
  console.log('成功1',value);
},(reson)=>{
  console.log('失败1',reson);
})

使用return可以在then方法中将返回的Promise实例改为fulfilled

2.catch方法

catch里面参数函数在什么时候被执行？

1. 在调用reject
2. 输入了一个错误的代码的时候会调用catch

const p = new Promise((resolve, reject) => {
      reject()
      // console.log(a);
    })


    p.catch((reson) => {
      console.log('出错了', reson);
    })

4.解决回调地狱的问题

使用Promise

new Promise((reslove, reject) => {
  $.ajax({
    type: 'GET',
    url: 'data1.json',
    success: function (res) {
      reslove(res)
    },
    error: function (res) {


    }


  })
}).then((data) => {
  const { id } = data
  return new Promise((reslove, reject) => {
    $.ajax({
      type: 'GET',
      url: 'data2.json',
      data: { id },
      success: function (res) {
        reslove(res)
      },
      error: function (res) {


      }
    })
  }).then((data) => {
    const { username } = data
    return new Promise((reslove, reject) => {
      $.ajax({
        type: 'GET',
        url: 'data3.json',
        data: { username },
        success: function (res) {
          reslove(res)
        },
        error: function (res) {
        }
      })
    })
  })
})

代码优化

因为代码里面有许多重复的，所以我们把Ajax封装起来 看起来更简洁

    // 封装一个函数用来请求数据
    function getData (url, data = {}) {
      return new Promise((reslove, reject) => {
        $.ajax({
          type: 'GET',
          url: url,
          data: data,
          success: function (res) {
            reslove(res)
          },
        })
      })
    }

    getData('data1.json').then((data) => {
      const { id } = data
      return getData('data2.json', { id }).then((data) => {
        const { username } = data
        return getData('data3.json', { username }).then((data)=>{
          console.log(data);
        })
      })
    })