JavaScript框架篇——promise基础

JS是单线程语言

为什么JS是单线程的?

JavaScript的单线程，与它的用途有关。 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。 例如: 如果JS是多线程的现在有一个线程要修改元素中的内容, 一个线程要删除该元素, 这时浏览器应该以哪个线程为准？所以JS中的代码都是串行的, 前面没有执行完毕后面不能执行。

同步代码和异步代码

除了"事件绑定的函数"和"回调函数"以外的都是同步代码
2.1程序运行会从上至下依次执行所有的同步代码
2.2在执行的过程中如果遇到异步代码会将异步代码放到事件循环中
2.3当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件
2.4一旦满足条件就执行满足条件的异步代码

什么是promise?

Promise是ES6中新增的一个对象,通过Promise就可以实现 用同步的流程来表示异步的操作，通过Promise就可以 避免回调函数层层嵌套(回调地狱)问题。

promise的作用

企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套，如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低；promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)。

如何创建Promise对象?

    new Promise(function(resolve, reject){});
    promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码

Promise是如何实现 通过同步的流程来表示异步的操作的?
：promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数。
Promise对象三种状态

• pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态

• fulfilled(resolved):只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功

• rejected: 只要调用rejected函数,状态就会变为rejected, 表示操作失败

  注意点: 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled，既从pending变为rejected, 那么永远都是rejected。

监听Promise状态改变
我们还可以通过函数来监听状态的变化：状态发生改变，就会执行对应的回调函数。

resolved --> then()
rejected --> catch()

promise的then方法

then方法：

1. then方法接收两个参数,
   第一个参数是状态切换为成功时的回调,
   第二个参数是状态切换为失败时的回调
2. 在修改promise状态时, 可以传递参数给then方法中的回到函数
3. 同一个promise对象可以多次调用then方法,当该promise对象的状态时所有then方法都会被执行
4. then方法每次执行完毕后会返回一个新的promise对象
5. 可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数；注意点:无论是在上一个promise对象成功的回调还是失败的回调传递的参数,都会传递给下一个promise对象成功的回调
6. 如果then方法返回的是一个Promise对象, 那么会将返回的Promise对象的执行结果中的值传递给下一个Promise对象的then方法

let promise = new Promise(function (resolve, reject) {
        resolve("111"); // 将状态修改为成功
        // reject("aaa"); // 将状态修改为失败
    });
    let ppp = new Promise(function (resolve, reject) {
        // resolve("222"); // 将状态修改为成功
        reject("bbb"); // 将状态修改为失败
    });
    let p2 = promise.then(function (data) {
        console.log("成功1", data);
        return ppp;
    }, function (data) {
        console.log("失败1", data);
        return "bbb";
    });
    p2.then(function (data) {
        console.log("成功2", data);
    }, function (data) {
        console.log("失败2", data);
    });

catch方法
1.catch方法是then方法没有成功的回调，只有失败的回调。catch 其实是 then(undefined, () => {}) 的语法糖
2.catch方法 注意点: 如果需要分开监听, 也就是通过then监听成功通过catch监听失败，那么必须使用链式编程, 否则会报错
推荐监听方法：

promise.then(function () {
         console.log("成功");
     }).catch(function () {
         console.log("失败");
     });

3.和then一样, 在修改promise状态时, 可以传递参数给catch方法中的回到函数
4.和then一样, 同一个promise对象可以多次调用catch方法,当该promise对象的状态时所有catch方法都会被执行
5.和then一样, catch方法每次执行完毕后会返回一个新的promise对象
6.和then一样, 上一个promise对象也可以给下一个promise成功的传递参数，注意点:无论是在上一个promise对象成功的回调还是失败的回调传递的参数,都会传递给下一个promise对象成功的回调。
7.和then一样, catch方法如果返回的是一个Promise对象, 那么会将返回的Promise对象的执行结果中的值传递给下一个catch方法
8.和then方法第二个参数的区别在于, catch方法可以捕获上一个promise对象then方法中的异常

    promise.then(function () {
        console.log("成功");
        xxx
    }).catch(function (e) {
        console.log("失败", e);
    });
    //成功
    失败 ReferenceError: xxx is not defined
    at 30-Promise-catch方法.html:118

JS中如何进行异常处理
利用 try{}catch{} 来处理异常可以保证程序不被中断, 也可以记录错误原因以便于后续优化迭代更新
try {
可能遇到的意外的代码
}
catch(e) {
捕获错误的代码块
}