promise解决回调地狱

1,277

promise

promise

一个es6提出的新语法,用来优化异步代码

什么是pormise

  1. pormise:承诺
  • 在生活中这是对将来要发生的事表示肯定,在上学期间给父母给老师承诺我一定会考出一个好成绩,在谈女朋友后给她承诺一定会给她一个美好的未来这都是pormise有了承诺肯定有成功和失败还有待定三种状态(resolved,rejected,pending)

  • 在es6中,它是一种新增结构器,用来优化实现异步操作在没有他之前,JavaScript中的异步处理,大多数是利用回调函数来实现的.典型:(1)setTimeout(2)ajax(3)nodejs中文件读取.现在有了promise,就可以对这些异步操作进行改写

如何解决回调地狱

 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的基本使用

  • 构造器必须要定一个参数,如果不给就是报错.例如,new promise()报错信息就是:Promise resolver undefined is not a function这不是一个函数

  • 构造器的实参是一个函数,这个函数的特殊在于他有两个形参

  • 在函数的内部,一般会执行异步代码,然后根据情况来调用

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改造回调函数

  • 第一步:建立模板.这里的末班是指固定的套路:写一个空函数,在函数体中创建一个promise对象并返回

  • 第二步:把一部功能写入构造器中,根据实际来决定是否调用resolve,reject

  • 第三步:调用函数通过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状态的回调函数

执行逻辑

  • 如果promise对象的状态是resolved,则then()会执行第一个函数,并传入当前的PromiseValue

  • 如果promise对象的状态是rejected,则then()会执行第二个函数,并传入当前的PromiseValue

  • 特别地,如果promise对象的状态是rejected,且此时then方法并没有设置第二个参数,就会向外抛出一个错误,错误的提示大约是Uncaught (in promise)

catch的格式及用法

  • catch 是 then(null, reject)的别名

  • 一般与then一块使用,单独使用无意义

async-await的语法

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

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

await命令

  • await的外层函数必须有一个async

  • 正常情况下,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()

每日鸡汤

想象你自己对困难作出的反应,不是逃避或绕开它们,而是面对它们,同它们打交道,以一种进取的和明智的方式同它们奋斗