Promise

• 异步：操作之间没啥关系，同时进行多个操作

• 同步：同时只能做一件事

• 异步：代码更复杂
• 同步：代码简单

Promise —消除异步操作

• 用同步方式，书写异步代码

用法

let p = new Promise(function(resolve,reject){
    //异步代码
    //resolve --- 成功
    //reject ---  失败
    $.ajax({
        url：’arr.txt‘,
        dataType:'json,
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });

});
//当有结果的时候就调用then
p.then(function(arr){//相当于resolve
    alert(arr);
},function(err){//相当于reject
    alert(err);
});

多个Promise

• Promise.all();

let p1 = new Promise(function(resolve,reject){
    //异步代码
    //resolve --- 成功
    //reject ---  失败
    $.ajax({
        url：’arr.txt‘,
        dataType:'json,
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });

});
let p2 = new Promise(function(resolve,reject){
    //异步代码
    //resolve --- 成功
    //reject ---  失败
    $.ajax({
        url：’json.txt‘,
        dataType:'json,
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });

});
//all()，Promise全都执行完之后
Promise.all([
    p1,p2
]).then(function(arr){
    alert(’全都成功‘);
    let [res1,res2] = arr;
    alert（res1);
},function(err){
    alert(’至少有一个失败‘)
});

简化:不写两个Promise

function createPromise(url){
    return new Promise(function(resolve,reject){
    //异步代码
    //resolve --- 成功
    //reject ---  失败
    $.ajax({
        url：url,
        dataType:'json,
        success(arr){
            resolve(arr);
        },
        error(err){
            reject(err);
        }
    });

});
}
Promise.all([
    createPromise('arr.txt'),
    createPromise('json.txt')
]).then(function(arr){
    alert(’全都成功‘);
    let [res1,res2] = arr;
    alert（res1);
},function(err){
    alert(’至少有一个失败‘)
});

结合jquery,高版本jquery自带Promise

Promise.all([
    $.ajax({url:'arr.txt',dataType:'json'}),
    $.ajax({url:'json.txt',dataType:'json'})
]).then(function(results){
    let [arr,json] = result;
},function(err){

});

其他用法

• Promise.race 竞速

同时如5个资源，哪个先来，先用哪个

Promise.race([
    $.ajax({url:'http://1.com'}),
    $.ajax({url:'http://2.com'}),
    $.ajax({url:'http://3.com'}),
])

Promise.all([
    $.ajax({url:'arr.txt',dataType:'json'}),
    $.ajax({url:'json.txt',dataType:'json'})
    $.ajax({url:'num.txt',dataType:'json'}),

]).then(results=>{
    let [arr,json,num] = results;
},err=>{
    console.log(err);
})

generator

生成器，一种函数

• 普通函数：一路到底
• generator函数：中间能停

# 带星号
function *show(){//创建一个generator对象
    alert('a');

    yield;//暂停

    alert('b');
}
let genObj = show(); 
genObj.next(); // 执行alert('a');
//如果再一次.next()就执行alert('b');

适合场景

• 请求数据
• 最大特点：让一个函数走走停停

重点：yield

• 可以传参和返回

function *show(num1,num2) {

    alert('a');
    let a =yield;
    alert('b');
    alert(a);//5
}
let gen = show(1,2);
gen.next(12);//没法给yeild传参
gen.next(5);//参数会被传递到

• 返回

function *show() {
    alert('a');
    yield 12;
    alert('b');
    return 1;
}
let gen = show();
let res1= gen.next();
console.log(res1); 
//Obejct {value:12,done:false;}
let res2= gen.next(); 
console.log(res2);
//Object {value:1,done:true}
//value来自return,若没有return 则value为undefined

function *炒菜(菜市场买回来的){
    洗菜->洗好的菜
    let 干净的菜= yeild 洗好的菜

    干净的菜->切菜->丝

    let 切好的菜 = yeild 丝;

    切好的菜->炒->熟的菜

    return 熟的菜;
}

generator 实例

解决异步操作

cnpm i yield-runner-blue //获取文件夹中的index.js

数据读取

好处：像写同步操作一样写一步操作

runner(function *(){
    let data1 = yield $.ajax({url:'1.txt',dataType:'json'});//yield 出一个Promise对象给runner，然后执行返回给data1
    let data2 = yield $.ajax({url:'2.txt',dataType:'json'});
    let data3 = yield $.ajax({url:'3.txt',dataType:'json'});

    console.log（data1,data2,data3);
});

几种异步操作：

• 回调
• Promise
• generator

generator对比Promise：

• Promise 带逻辑

Promise.all([
    $.ajax({url:'getUserData',dataType:'json'})
]).then(results=>{
    let userData = results[0];
    if(userData.type=='vip'){
       Promise.all([
        $.ajax({url：'getVipItems',dataType:'json'})
]).then(results=>{
    let items = results[0];
    //生成列表
},err=>{
    alert('fail');
})
    }
},err=>{
    alert('失败');
})

• generator 带逻辑

runner(function *(){
    let userData = yield $.ajax({url:'getUserData',dataType:'json'});
    if(userData.type=='vip'){
    let items = yield $.ajax({url:'getVipItems',dataType:'json'});
    }else {
    let items = yield $.ajax({url:'getItems',dataType:'json'});
    }
    //生成列表...
})

综上，generator适合处理逻辑性判断，Promise适合一次读一堆。另外，generator是对Promise一个封装。

generator在KOA中的应用

https://koa.bootcss.com/

下载koa 与 koa-mysql

cnpm i koa
cnpm i koa-mysql

const koa = require('koa');//使用require引入koa库
const mysql = require('koa-mysql');

let db=mysql.createPool({host:'localhost',user：'root',password:'123456',dataBase
:'test'});//创建mysql

let server = new koa(); //创建一个服务

//generator在KOA中的应用
server.use(function *(){
    //this.body = 'abc';//在页面上输出abc
    let data = yield db.query('SELECT * FROM user_table');//查询user_table
    this.body = data;
});

server.listen(8080); //服务器监听