ES6之Promise 构造函数-------使用Promise解决回调地狱

Promise基本概念

console.dir(Promise)
1.Promise 是一个 构造函数，既然是构造函数，那么，我们就可以 new Promise() 得到一个 Promise 的实例
2.在Promise 上，有两个函数，分别叫 resolve（成功之后的回调函数） 和 reject （失败之后的回调函数）
3.在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就是说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
4.Promise 表示一个 异步操作 ；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的 异步操作；
5.既然 Promise 创建的实例，是一个 异步操作 ，那么这个 异步操作 的结果，只能有两种状态：
5.1 状态一：异步执行成功了，需要在内部调用 成功的回调函数，resolve 把结果返回给调用者；
5.2 状态二：异步执行失败了，需要在内部调用 失败的回调函数， reject 把结果返回给调用者
5.3 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把 操作的结果返回给调用者；这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者
6.我们可以在 new 出来的 Promise 实例上调用 .then()　方法，【预先】　为这个　Promise 异步操作，指定 成功(resolve) 和 失败(reject) 回调函数；

	var promise = new Promise()
   //注意：这里new 出来的 promise 只是代表【形式上】的一个异步操作;
   //什么是形式上异步操作：就是说我们只知道它是一个异步操作，做什么具体的异步事情，目前还不清楚

	// 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作
	var promise = new Promise(function () {
     	// 这个 function 内部写的就是具体的异步操作
	 })

注意：每当 new 一个 Promise 实例的时候，就会 立即执行这个 异步操作中的代码，也就是说，new 的时候，除了能够得到一个 Promise 实例之外，还会立即调用 我们为 Promise构造函数 传递的那个 function , 执行这个 function 中的 异步操作代码；

---

使用Promise构造函数，实现读取文件的小例子

需求：你要封装一个方法，我给你一个要读取文件的路径，你这个方法能帮我读取文件，并把内容返回过来！

在项目根目录下创建files文件夹，创建三个.txt文件，每个文件里写点内容

const fs = require('fs')

// 在js中，除了function以外，其他的都会自动执行，
// Promise只要已被创建就会立即执行，我们要想，不让 Promise 立即执行，我们要把他放到
// 一个 function 中，只有调用才执行

// 需求：给路径，返回读取的内容
function getFileByPath(fpath) {
    // 1.主程序【只负责】 new 一个 promise实例，会立即执行 function，但是主程序不会关心谁执行这个异步操作
    var promise = new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'UTF-8', (err, dataStr) => {
            if (err) return reject(err)
            resolve(dataStr)
        })
    })
    // 2.得到promise这个变量，然后立即(一瞬间)把这个变量 return 出去，这个时候function里的异步操作可能还没做完或者还没开始做
    return promise
}
// 2.在外部调用的时候，无法访问到promise，因为函数作用域，在函数内部的变量，如果没有return出去，
// 外部无法访问到，在内部得到一个promise对象，所以return 出去，
// 所以下边的 p 就引用了上边内部的 promise
// promise 实例身上有 .then() 这个方法，

var p = getFileByPath('./files/21.txt')
// 当拿到promise这个实例的时候，上边的function异步操作，可能还没有执行，因为主程序是一瞬间 return 的
// 然后做 .then() ,【先做】 .then()，这时候，function异步操作 中的两个形参:resolve、reject 已经具体化了
// resolve就表示 .then() 里的第一个回调函数，reject就表示 .then() 里的第二个回调函数
p.then(function (data) {
    console.log(data + '----')
}, function (err) {
    console.log(err.message)
})

注意：一定要明白这个内部的执行顺序！！！！

---

执行顺序图：

代码简写形式：

const fs = require('fs')
function getFileByPath(fpath) {
    // new 完即 return
    return new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'UTF-8', (err, dataStr) => {
            if (err) return reject(err)
            resolve(dataStr)
        })
    })
    // 得到promise这个变量，然后立即(一瞬间)把这个变量 return 出去，
}


getFileByPath('./files/21.txt')
    .then(function (data) {
        console.log(data + '----')
    }, function (err) {
        console.log(err.message)
    })

---

使用Promise解决回调地狱问题

什么是回调地狱：

一般我们会碰到的回调嵌套都不会很多，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。

---

回调地狱代码例子：

需求1：

我们要先读取文件1，然后读取文件2，最后读取文件3

getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
    console.log(data)

    getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {
        console.log(data)

        getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {
            console.log(data)
        })
    })
})

注意：以上代码嵌套形式就是回调地狱，千万不要这样写！！！！！

---

使用Promise解决回调地狱代码例子：

// 需求1：先读取文件1、然后读取文件2，然后文件3
const fs = require('fs')

function getFileByPath(fpath) {
    return new Promise(function (resolve, reject) {
        fs.readFile(fpath, 'UTF-8', (err, dataStr) => {
            if (err) return reject(err)
            resolve(dataStr)
        })
    })

}

// 注意：通过 .then() 指定回调函数的时候，成功的回调函数，必须传，但是，失败的回调，可以省略



// 在上一个 .then() 中返回一个新的 promise 实例，可以继续用下一个 .then() 来处理
// 如果前面的 Promise 执行失败，我们不想让后续的promise 操作被终止，可以为每个 promise
// 指定 失败的回调

// 读取文件1
getFileByPath('./files/11.txt')
    .then(function (data) {
        console.log(data)
        // 读取文件2
        return getFileByPath('./files/2.txt')
    }, function (err) {
        console.log('这是失败的结果：' + err.message)
        // return 一个新的 Promise ,为了不当误后边的继续执行
        return getFileByPath('./files/2.txt')
    })
    .then(function (data) {
        console.log(data)
        // 读取文件3
        return getFileByPath('./files/3.txt')
    })
    .then(function (data) {
        console.log(data)
    })

以上就解决了回调地狱问题！！！

---

需求2：

和上边的需求刚好相反，如果后续的Promise 执行，依赖于 前面的 Promise 执行的结果，如果前面的失败了，则后边的就没有继续执行下去的意义了，此时，我们想要实现，一旦报错，则立即终止所有 Promise 的执行
利用 .catch()

getFileByPath('./files/11.txt')
    .then(function (data) {
        console.log(data)
        // 读取文件2
        return getFileByPath('./files/2.txt')
    })
    .then(function (data) {
        console.log(data)
        // 读取文件3
        return getFileByPath('./files/3.txt')
    })
    .then(function (data) {
        console.log(data)
    })
    // .catch() 的作用：如果前面有任何的 Promise 执行失败，则会立即终止所有 Promise 的执行
    // 并 马上进入 catch 去处理 Promise 中抛出的错误。
    .catch(function (err) {
        console.log(err.message)
    })

---

jQuery中Ajax使用Promise

自己写一个本地的json数据：

---

例子：

<!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>
    <input type="button" value="获取数据" id="btn">

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        $(function () {
            $('#btn').on('click', function () {
                $.ajax({
                    url: './data.json',
                    type: 'get',
                    dataType: 'json',
                    // success: function (data) {
                    //     console.log(data)
                    // }
                }).then(function (data) {
                    console.log(data)
                })
            })
        })
    </script>
</body>

</html>