模块化和回调地狱，以及Promise

1、什么是模块化？什么是模块化开发？

模块化是将项目中不同的功能拆分成多个独立的模块，通过模块之间的互相组合完成一定功能的操作过程

模块化开发完成模块化拆分和最后的模块化合并的开发模式

根据功能封装模块 通过import导入 然后通过export导出

可以使用 export 导出也可以使用export default导出

我们使用import 来导入

export 和 export defualt的区别

1. export 可以导出多个属性或者方法 ,需要用{}括起来 在用import接受的时候也得用{}接受
2. export default是以整体的方式抛出，接受的时候只接一个

2.什么是模块化规范？
服务端的模块化规范主要是CommonJS，Node.js用的就是CommonJS规范客户端。
AMD推崇依赖前置， CMD推崇依赖就近。
AMD规范的实现主要有require.js,CMD规范的主要实现有SeaJS。但是SeaJS已经停止维护了，因为在EMAScript6中提供了EMAScript Module模块规范化，随着EMAScript6的普及，第三方模块化规范的实现会慢慢地被淘汰

3.Javascript 模块化是否等同于异步模块化？
主流的Javascript模块化方案都使用"异步模块定义"的方式，这种方式给开发带来了极大的不便，所有的同步代码都需要修改为异步方式。
当前前端开发中使用"CommonJS"模块化开发规范时，开发者可以使用自然，容易理解的模块定义和调用方式，不要关注模块是否异步，不需要改变开发者的开发行为。因此Javascript模块化开发并不等同于异步模块开发
 

4.模块化的javascript开发的优势是什么

1.将功能分离出来
2.具有更好的代码组织方式
3.可以按需加载
4.避免了命名冲突
5.解决了依赖，管理问题

一、回调地狱的产生：在回调函数中存在异步任务的代码时，不能保证能按照顺序执行时会产生回调地狱。

二、回调地狱是什么？

回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

 setTimeout(function () {  //第一层
            console.log('武林要以和为贵');
            setTimeout(function () {  //第二程
                console.log('要讲武德');
                setTimeout(function () {   //第三层
                    console.log('不要搞窝里斗');
                }, 1000)
            }, 2000)
        }, 3000)

输出结果为：武林要以和为贵
            要讲武德
            不要搞窝里斗

二、如何解决回调地狱

1.Promise

Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。

promise是es6处理异步的一种方式，它的本质是一个对象,promise的参数是一个回调，回调有连个参数 resolve 成功回调 reject 失败回调。它有三种状态分别为 初始状态pending  已完成fulfilled 已失败rejected。状态改变只有两种结果 完成或者失败。

promise处理错误的方式有两种  第一种在then中传递两个回调 第二个回调是错误回调

第二种方式是通过catch方式来实现

promise常用的api有 then ()处理回调函数 catch()捕获异常 还有两个常用的静态方法

Promise.all()一块处理多个promise请求，所有的请求都成功才成功。

Promise.race()一块处理多个promise请求，有一个成功就成功

es7中可以使用async实现异步处理，还有一个关键字await可以实现异步函数同步化

        function fn(str){
            var p=new Promise(function(resolve,reject){
                //处理异步任务
                var flag=true;
                setTimeout(function(){
                    if(flag){
                        resolve(str)
                    }
                    else{
                        reject('操作失败')
                    }
                })
            })
            return p;
        }

        fn('武林要以和为贵')
        .then((data)=>{
            console.log(data);
            return fn('要讲武德');
        })
        .then((data)=>{
            console.log(data);
            return fn('不要搞窝里斗')
        })
        .then((data)=>{
            console.log(data);
        })
        .catch((data)=>{
            console.log(data);
        })

2 async/await   关键字

async/await 是ES7提出的基于Promise的解决异步的最终方案。

async

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

await
await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

async/await 的正确用法

// 使用async/await获取成功的结果

// 定义一个异步函数，3秒后才能获取到值(类似操作数据库)
function getSomeThing(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('获取成功')
        },3000)
    })
}

async function test(){
    let a = await getSomeThing();
    console.log(a)
}
test(); // 3秒后输出：获取成功

总结：
当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法糖，可以使得异步代码看起来更像是同步代码