javaScript的回调函数、Promises对象、async与await（详解）（更新中……）

目录

前言：

JS为什么要将任务分成同步任务与异步任务？

 1. 回调函数

1.1 什么是回调函数(callback)？

1.2 匿名回调函数

1.3 回调函数有哪些特点？

1.4 为什么会使用回调函数？ 

1.5 什么是回调地狱 ？

2. Promises对象

2.1 什么是Promise对象？

2.2 初识Promise

2.3 Promise对象为什么要放在函数里？resolve与reject是做什么的？

 3. async、await

---

前言：

         JavaScript是单线程语言，一次只能完成一个任务，如果有多个任务就必须插队执行，在执行完前一个任务后，再执行后一个任务。这种模式虽然实现起来比较简单，但是只要一个任务耗时过长，后面的任务就要排队，会拖延整个程序的运行。为了解决这个问题，JavaScript将任务的执行模式分成两种：同步执行与异步执行。

JS为什么要将任务分成同步任务与异步任务？

        如果JS的任务都是同步的，那么遇到定时器、网络请求等事件的时候，页面就会暂停下来等待这些事件完成后再去执行其他任务。这就导致页面可能会陷入假死状态。也就是常说的页面瘫痪。所以JS引入了异步任务。

同步：按照代码的顺序从上到下依次执行每一行代码，上一行代码没有执行结束，下一行代码不会开始。

异步：按照代码的顺序从上到下依次执行每一行代码，当遇到异步代码的时候，不会立即执行异步代码，而是把异步代码放在队列最后等待。当所有的同步代码执行完毕后，再去执行异步代码。

 1. 回调函数

1.1 什么是回调函数(callback)？

        把函数以实参的形式，传到另一个函数中，在需要的地方调用这个函数。传递来的函数，就是回调函数(callback)。可以将回调函数理解成一段代码，一段在本函数之外,在需要时才运行的代码段。🌟函数可以作为一个参数传递给另外一个函数。

 let arr = [4, 5, 6, 7, 8, 89, 1, 23, 4, 5, 778, 55, 333, 2, 3]
    // 数据中有 3 时，将整条数据求和
    function summation(arr, callback) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] == 3) {
                callback(arr)
            }
        }
    }
    function cbFun(arr) {
        let numAdd = 0
        arr.forEach(item => {
            numAdd = numAdd + item
        });
        console.log(numAdd);
    }
    summation(arr, cbFun)

1.2 匿名回调函数

    let arr = [4, 5, 6, 7, 8, 89, 1, 23, 4, 5, 778, 55, 333, 2, 3]
    // 数据中有 3 时，将整条数据求和
    function summation(arr, callback) {
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] == 3) {
                callback(arr)
            }
        }
    }

    summation(arr, function (arr2) {
        let numAdd = 0
        arr.forEach(item => {
            numAdd = numAdd + item
        });
        console.log(numAdd);
    })

1.3 回调函数有哪些特点？

1. 不会立即执行，回调函数作为参数传递给另一个函数，传递的只是函数的定义，回调函数的本质是函数，所以调用时依然要使用xxxx()的格式才可以调用。

2. 回调函数是一个闭包，可以访问父级及父级以上的作用域变量。

3. 一个函数在另一个函数中被调用。而且可以当参数传给其他函数。

1.4 为什么会使用回调函数？ 

         javaScript不会因为要等待一个响应而停止程序的执行，而是在监听其他事件时继续执行。回调函数正是确保一段代码执行完毕之后再执行另一段代码的方式。 回调函数被认为是一种高级函数，一种被作为参数传递给另一个函数的高级函数。🌟回调函数的本质是一种模式，因此回调函数也被称为回调模式。 

// 顺序执行两个函数的调用
  function a() {
        console.log("我是a函数");
    }
    function b() {
        console.log("我是b函数");
    }
    a()
    b()
// 打印结果     我是a函数
//             我是b函数

// 加入回调函数
 function a(callback) {
        if (typeof callback == "function") {
            setTimeout(() => {
                callback()
            }, 500);
        }
    }
    function b() {
        console.log("我是b函数");
    }

    a(function name(params) {
        console.log("我是a函数");
    })
    b()
// 打印结果     我是b函数
//             我是a函数

1.5 什么是回调地狱 ？

        其实从本质上说，回调函数并不是异步操作。在早期的JavaScript中，只支持定义回调函数来表明异步操作完成。串联多个异步操作是一个常见的问题，通常需要深度嵌套的回调函数来解决(俗称：回调地狱)。

2. Promises对象

2.1 什么是Promise对象？

        Promises对象代表了未来将要发生的事件，用来传递异步操作的信息。其状态不受外界影响，🌟Promise对象代表一个异步操作。

2.2 初识Promise

Promise的三种状态：

1.  待定（pending）

2. 兑现（fulfilled，有时候也称为“解决”，resolved）

3. 拒绝（rejected）

Promise对象的状态不受外界影响，只有异步操作的结果可以决定当前是哪一种状态，并且状态一旦改变，就不会再次发生改变。

new一个Promise对象，如下代码在页面中100毫秒后，自动在控制台输出了“promise执行完成”

  new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("promise执行完成");
        }, 100);
    })
// 控制台打印结果： promise执行完成

当new一个Promise时，就已经开始自动执行函数，因为Promise时同步的，.then才是异步的。所以在使用Promise对象时，一般是包在一个函数中，在需要的时候去调用这个函数。

 $('#aaa').click(() => {
        console.log("Promise的事件被调用了");
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("promise执行完成");
            }, 100);
        })
    })

2.3 Promise对象为什么要放在函数里？resolve与reject是做什么的？

在包装好的函数中return出Promise对象，在执行这个函数时，我们就得到了一个Promise形式的对象返回，这样就可以使用Promise对象上的.then与.catch。

$('#aaa').click(() => {
        PromiseBack()
            .then((data) => {
                console.log(data);
                return PromiseBack2()
            })
            .then((data) => {
                console.log(data);
                return PromiseBack3()
            })
    })

    PromiseBack = function (params) {
        console.log("PromiseBack的事件被调用了");
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("PromiseBack执行完成");
                resolve("PromiseBack成功时打印的数据")
            }, 100);
        })
    }
    PromiseBack2 = function (params) {
        console.log("PromiseBack2的事件被调用了");
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("promiseBack2执行完成");
                resolve("PromiseBack2成功时打印的数据")
            }, 100);
        })
    }
    PromiseBack3 = function (params) {
        console.log("PromiseBack3的事件被调用了");
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log("promiseBack3执行完成");
                resolve("PromiseBack3成功时打印的数据")
            }, 100);
        })
    }

连续调用时，解决了回调地狱的问题，以下是打印结果。 

 3. async、await