async-await语法.解决回调地狱问题小编在这里先祝大家,劳动节快乐!而小编这些天因为一个回调问题的困扰在家想了一

小编在这里先祝大家,劳动节快乐!而小编这些天因为一个回调问题的困扰在家想了一天怎样解决这个问题.现在就来给大家说一说.

1.我们先来提出问题,什么是回调地狱.

1.1回调函数套回调函数的情况就叫做回调地狱.如果调用一个两个回调函数,我们还可以理解解决,但是多个回调呢,这个时候我们就会先代码会有多层嵌套,影响代码的阅读性和代码的整洁,就是看上去不是那么好看,话不多说,我们直接上代码.

1.2后端接口.
// 静态资源托管，直接访问public/api.html

const express = require('express')
const app = express()
var cors = require('cors')

// 处理跨域请求
app.use(cors())

app.use( express.static('public') )

// 接口1：获取所有的频道
app.get('/get', (req, res) => {
  res.send([{id:1, name:'体育频道'}, {id:2, name:'娱乐频道'}])
})

// 接口2：获取指定频道下的分类
app.get('/getCategory', (req, res) => {
  if(req.query.id==1){ // 体育频道
    res.send([{id:12, name:'NBA新闻'}, {id:13, name:'足球新闻'}])
  }else {
    res.send([{id:10, name:'娱乐天天笑'}])
  }
})

// 接口3：获取指定新闻列表
app.get('/getNews', (req, res) => {
  if(req.query.id==12){ // NBA新闻
    res.send([{id:1, name:'谁能得到今年的总冠军'}, {id:2, name:'湖人已经不行了么？'}])
  }else {
    res.send([])
  }
})

app.listen(3000)

1.3前端代码.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        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)
                        }
                    })
                }
            })
        }})
    </script>
</body>
</html>

在这里我们可以看到,多个函数的嵌套,既影响了代码的美观,又影响了代码的阅读性,既不实用又不好看.所以我们在这里要先学习一个ES6的新语法来解决这个问题.

2.Promise语法的基本使用

Promise是承诺的意思，es6中提出一个新api。用来优化异步代码。它的经典使用方式如下

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(){
    // 一定会执行的函数
})

2.2构造器

// const obj = new Object()
// const arr = new Array()
const p1 = new Promise(function(resolve,reject){
  // 执行异步代码
  // 调用resolve,或者reject
});
console.dir(p1)

要点：

构造器必须要给定一个参数，如果不给就是会报错。例如，new Promise() 报错的信息是： Promise resolver undefined is not a function
构造器的实参是一个函数，这个函数的特殊之处在于它有两个形参(resolve,reject)，这两个形参也是函数。在格式上，也可以采用箭头函数来改写。例如：var p1 = new Promise((resolve,reject)=>{})。
在函数体的内部，一般会执行异步代码，然后根据情况来调用resolve()或者是reject() 。调用resolve或者是reject后会产生什么样的后果，在后面小节介绍。当然了，再次强调一下resolve和reject只是形参名，可以改写成其它的。

三种状态和值

一个Promise对象的状态可能是如下三种之一：pending,resolved,rejected 。下面分别介绍

初始态`pending`

pending。它的意思是 "待定的，将发生的"，相当于是一个初始状态。创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。

成功态`resolved`

也有叫fulfilled的。

resolved。表示解决了，就是说这个承诺实现了。要实现从pending到resolved的转变，需要在创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。

失败态rejected

rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

三种状态小节

    1.状态是可以转化的, 最初创建promise对象时,默认状态是pending，如果在函数体内部调用了
    第一个参数对应的函数，则状态变成了resolved；如果调用了第二个参数对应的函数，则状态变成了rejected。
    2.状态转换是不可逆的.
    一旦从pending ---> resolved（或者是rejected），就不可能再回到pending，也不能由resolved变成rejected。

paromise的值

一个promise对象除了状态之外,还有promiseValue.在构造器中,这个值在调用resolve和reject方法时传入.

3.如何使用promise改造回调函数

下面我们回到具体的问题:如何对现有的,通过回调函数来实现异步操作的代码进行改写.

基本套路

第一步

建立模板.这里的模板是指固定的套路：写一个空函数，在函数体中的创建一个promise对象，并返回。

function fnName(){
    var p = new Promise((resolve,reject)=>{  })
    return p;
}

第二步

把异步功能写入构造器中，根据实际来决定是否调用resolve,reject。

function fnName(){
    var p = new Promise((resolve,reject)=>{
        // 这里写具体的代码，并在某个恰当的时机去调用resolve和reject函数。
    })
    return p;
}

第三步:调用函数

通过 fnName().then().catch()结构来调用这个函数.

async-await语法

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

async

async函数返回一个 Promise 对象。

async函数内部return语句返回的值是Promise 对象的值 ``

回调地狱.用async来优化如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./axios.js"></script>
    <script>
        async function fnAxios() {
           const res =  await axios.get('http://localhost:3000/get')
           console.log('第1个请求', res)
           const res1 =  await axios.get('http://localhost:3000/getCategory?id='+res.data[0].id)
           console.log('第2个请求', res1)
           const res2 =  await axios.get('http://localhost:3000/getNews?id='+res1.data[0].id)
           console.log('第3个请求', res2)
        }
        fnAxios()

    </script>
</body>
</html>

这样我们就可以完美的解决回调地狱问题

async-await语法.解决回调地狱问题