promise解决回调地狱

回调地狱demo

 function getData({ url, success }) {
      const xhr = new XMLHttpRequest()
      xhr.open('get', url)
      xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
          // 加载完成
          const d = JSON.parse(xhr.responseText);
          success(d)
        }
      }
      xhr.send()
    }
getData({
            url:'http://localhost:3000/get',
            success: (data)=>{
                getData({
                    url:'http://localhost:3000/getCategory?id='+data[0].id,
                    success: data => {
                        getData({
                            url:'http://localhost:3000/getNews?id='+data[0].id,
                            success: data => {
                                console.log(data)
                        }
                    })
                }
            })
        }})

promise的基本使用

1. 构造器必须要定一个参数,如果不给就是报错.例如,new promise()报错信息就是:Promise resolver undefined is not a function这不是一个函数
2. 构造器的实参是一个函数,这个函数的特殊在于他有两个形参
3. 在函数的内部,一般会执行异步代码,然后根据情况来调用

var p1 = new Promise(function(resolve,reject){
     //异步操作 resolve(obj1)  或者 reject(obj2)
});
p1.then(function(rs){
    // 如果p1的状态是resolved，则then中的函数
    //会执行，且obj1的值会传给rs
}).catch(function(rs){
    // 如果p1的状态是reject，则catch中的函数
    //    会执行，且obj2的值会传给rs
}).finally(function(){
    // 一定会执行的函数
})

三种状态和值

promise的三种状态
pending:待定刚刚开始一个初始状态
resolved:成功表示承诺的东西实现了从pending状态到了resolved
rejected :表示承诺的东西失败了没有实现

三种状态的转换

pending----resolve----resolved
pending----reject----rejected
三种状态转换是不可逆的

使用promise改造回调函数

1. 第一步:建立模板.这里的末班是指固定的套路:写一个空函数,在函数体中创建一个promise对象并返回
2. 第二步:把一部功能写入构造器中,根据实际来决定是否调用resolve,reject
3. 第三步:调用函数通过fnName().then().catch()结构来调用这个函数

改写上面的代码

function getDataPromise(url) {
      let p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.onreadystatechange = function () {
          if (this.readyState === 4) {
            // 加载完成
            const d = JSON.parse(xhr.responseText);
            resolve(d)
          }
        }
        xhr.send()
      })
      return p
    }

then的格式及执行逻辑

p.then(函数1[,函数2])
第一个参数是resolved状态回调函数
第二个是rejected状态的回调函数

执行逻辑

1. 如果promise对象的状态是resolved，则then()会执行第一个函数，并传入当前的PromiseValue
2. 如果promise对象的状态是rejected，则then()会执行第二个函数，并传入当前的PromiseValue
3. 特别地，如果promise对象的状态是rejected，且此时then方法并没有设置第二个参数，就会向外抛出一个错误，错误的提示大约是Uncaught (in promise)

catch的格式及用法

catch 是 then(null, reject)的别名
一般与then一块使用,单独使用无意义

async-await的语法

async,await是es7中的新增语法,用来改进异步代码写法,是promise升级版

1. async函数返回一个promise对象
2. async函数内部return语句返回的值是promise对象的值

await命令

1. await的外层函数必须有一个async
2. 正常情况下,await命令后面是一个promise对象,返回该promise的值.如果不是promise对象就直接返回对应的值

使用async来优化回调地狱

async function fn() {
      const res = await getDataPromise('http://localhost:3000/get')
      console.log('第1次成功', res)
      const res1 = await getDataPromise('http://localhost:3000/getCategory?id=' + res[0].id)
      console.log('第2次成功', res1)
      const res2 = await getDataPromise('http://localhost:3000/getNews?id=' + res1[0].id)
      console.log('第3次成功', res2)
    }
    fn()

今日份鸡汤：懂得太多，看的太透，你就会变成世界的孤儿。

作者：新人小胖
链接：https://juejin.cn/post/7095248169830711327
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。