vue前置知识, generator、promise、async。。。

异步解决方案

回调

等函数执行完成在执行某一个（回调）；

        function test(x){
            setTimeout(function(){
                console.log(111)
                x();
            }, 1000)
        }
        function fn() {
            console.log("fn函数执行")
        }
        // 执行函数、传参
        test(fn);

为了避免回调地狱:（嵌套太深，导致无法维护，根本没法去看，阅读性太难），使用Promise对象；

Promise

• 必须在方法体内返回一个Promise的实例，然后得到两个参数，一个叫resolve（成功），一个叫reject（失败）
• 特点：
  1、执行是按照我们指定的顺序执行的
  2、执行时间太长，太死板

            // Promise
            // resolve 成功之后返回   reject 失败
            // Promise 接受两个函数参数 成功时调用resolve  失败调用reject
            var a = function () {
                return new Promise(function(resolve, reject){
                        setTimeout(function(){
                           resolve("a") ;
                        }, 1000);
                })
            }

            var b = function () {
                return new Promise(function(resolve, reject){
                        setTimeout(function(){
                           resolve("b") ;
                        }, 2000);
                })
            }

            var c = function () {
                return new Promise(function(resolve, reject){
                        setTimeout(function(){
                           resolve("c") ;
                        }, 3000);
                })
            }

// 链式调用  
// then 接受两个函数参数 第一个是成功时候执行（必须） 第二个是失败执行（非必须，一般不写，用catch处理失败）
    console.time("promise")
    a().then(function(a){
        console.log(111);
        return b();
    }).then(function(b){
        console.log(222);
        return c();
    }).then(function(c){
        console.log(333);
        console.timeEnd("promise")
    }).catch(function(){
        console.log("出错了");
    })

Promise.all

• 特点
  1、执行顺序是按照方法本身的时间/效率来执行的
  2、执行时间短，灵活

// 执行多个Promise
Promise.all([a(),b(),c()]).then(function(result){
    console.log("over");
});

async （ES7）

• async/await是一对黄金搭档，必须一起用，还是基于Promise的。
  特点：
  1、保证的是代码的可读性以及代码的顺序性
  2、使我们的阅读逻辑更加清晰

    var sleep = function(time) {
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                console.log("sleep函数执行")
                resolve();
            },time)
        })
    }

// 给方法一个标识async， 告诉他这是一个需要异步的函数
    var start = async function() {
        console.log("函数开始点");
        await sleep(1000);
        console.log("函数结束点");
    }
     start();
// 函数开始点
// async.html:18 sleep函数执行
// async.html:28 函数结束点

如果没有使用async 执行顺序为：

• 函数开始点
• 函数结束点
• sleep函数执行

基本规则

1、async表示这是一个异步函数，await只能应用在这个async函数里面
2、await表示在这里，会等待Promise返回结果之后再继续执行
3、await后面跟着的应该是一个Promise对象，但是如果不是，也就是返回其他值的情况下，代码不会出现错误，但是也不会出现代码同步的效果了
4、await必须在async函数的上下文当中

generator

• 有两个特征。
  一是，function关键字与函数名之间有一个星号；
  二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

异步解决方案、一个语法糖；

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';//return表示执行完成了，后面没有代码执行了，则返回的done为true
  yield "aa";//如果之前就return了   这个不会输出
}

/*
上述方法定义了三个状态，可以用hw.next()得到里面定义的状态
每次调用执行下一个  直到最后一个或者return
*/
var hw = helloWorldGenerator();

其他

字符串拼接

符号用 ` 字符创 `, 变量用${变量}；

如：

    var html = `<div>字符创中直接使用变量${a}和${b} </div>`