es6常用知识（三） prosime和generator

prosime

在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。

1 promise 翻译过来是 承诺的意思。
异步：操作之间没啥关系。同时进行多个操作。
同步：同时只能做一件事情。
异步的缺点就是，代码复杂，一层套一层，如果需要执行很多个异步操作都完成在执行某个事情，那么就要嵌套很多层，代码可读性差，不好维护。如：

    // 异步
 ajax('/bannders',function(bannder_data){
     ajax('/hotItems',function(hotItems_data){
         ajax('/slides',function(slides_data){

         }，function(){
             alert("读取失败")
         })
     },function(){
         alert("读取失败")
     })
 },function(){
     alert("读取失败")
 })

同步：代码简单 ,写起来方便

// 同步
    let bannder_data=ajax_async('/bannders')
    let hotItems_data=ajax_async('/hotItems')
    let slides_data=ajax_async('/slides')

可是同步虽然写法简单，但是每个步骤需要等待上一个操作结束，所以实际项目中需要的是异步（不等待）的操作。
于是prosime出现了，他的作用就是：

• 消除异步操作
• 用同步一样的方式来书写异步代码

1.Prosime到底怎么用

prosime是es6自带的。需要的用prosime的时候，可以直接new出来一个peomise对象。promise里面有一个参数，这个参数是函数，所有的异步操作代码都写在这个函数里面。这个函数有两个参数，一个是resolve（成功），另外一个是reject（失败）。例如：

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

promise的使用：p里面的then方法的意思是然后呢？就是当peomise对象执行之后有结果了，
之后执行。then里面有两个参数，都是函数，第一个函数其实就是resolve对应的结果。
第二个函数就是reject对象的结果。

p.then(function(arr){
   console.log('成功了',arr)
},function(err){
   console.log('失败了',err)
})

2.封装两个promise

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


var  p2=new Promise(function (resolve,reject) {
   异步代码
   resolve--成功
   reject---失败
   $.ajax({
       url:'data/json.txt',
       dataType:'json',
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})
promie上有一个方法all，就是全都执行完以后，all的参数是一个数组，是所以的promise对象，
之后then方法里面有两个参数，都是函数，第一个函数其实就是全都成功以后，其函数的参数就是返回所有resolve结果。，第二个函数是只是有一个失败了。：
Promise.all([p1,p2]).then(function(arr){
   alert("全成功")
   console.log(arr)
   也可以通过解构数组的方式，将arr展开赋值。可以依次拿到 每个resolve结果。
   let  [p1,p2]=arr
   console.log(p1)
   console.log(p2)
},function(){
   alert("至少有一个失败")
})

Promise的二次封装，createPromise，抽出可变的URL即可。

function createPromise(url) {
    return new Promise(function (resolve, reject) {
        // 异步代码
        // resolve--成功
        // reject---失败
        $.ajax({   
            url,//    url:url      json 值和名相同可简写，
            dataType: 'json',
            success(arr) {
                resolve(arr)
            },
            error(err) {
                reject(err)
            }
        })
    })
}


// promie上有一个方法all，就是全都执行完以后，all的参数是一个数组，是所以的promise对象，
// 之后then方法里面有两个参数，都是函数，第一个函数其实就是全都成功以后，其函数的参数就是返回所有resolve结果。，第二个函数是只是有一个失败了。：
Promise.all([createPromise('data/arr.txt'), createPromise('data/json.txt')]).then(function (arr) {
    alert("全成功")
    console.log(arr)
    //    也可以通过解构数组的方式，将arr展开赋值。可以依次拿到 每个resolve结果。
    let [p1, p2] = arr
    console.log(p1)
    console.log(p2)
}, function () {
    alert("至少有一个失败!")
})

generator （生成器）

1.什么是generaor函数。

Generator函数是一个带星星函数（星号和function和函数名不能同时连接接口），而且是一个可以暂停的函数。
函数的内部通过yield来推进函数。通过定义yield后面的值来决定返回的value。
函数返回一个遍历器，这个遍历器有一个next方法，可以获取一个对象，这个对象就包含了yield定义好的参数。

    function *show(){
        alert('a')
        yield; //放弃（暂时放弃执行）
        alert('b')
    }
    let genObj=show() //相当于创建了一个generator对象。
    //这个对象里有一个很重要的东西next（），就是下一步，下一步。
    //就是踹一脚走一步。
    genObj.next() //执行一步之后，看到yield之后，就停止执行了。
    //如果想让alert（’b‘）出来就需要next两步。
    genObj.next()

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

2.yield的传参

2.1第一个next是废的，不能传参。

// yield可以传参
function *show(){
    alert('a');

    let a=yield;
    alert('b');
    alert(a);
}
let gen=show();
gen.next(12);  //通过yield传参的时候，第一个next是废的，传传不了，如果想给第一个yield传参，
//通过函数就可以传参
gen.next(5);

2.2给第一个yield传参，就直接通过函数传参就可以了

    // 给第一个yield传参，就直接通过函数传参就可以了。
    function *show(num1,num2){
        alert(`${num1},${num2}`)
        alert('a');
        
        let a=yield;
        alert('b');
        alert(a);
    }
    let gen=show(98,97);
    gen.next(12);  //通过yield传参的时候，第一个next是废的，传传不了，如果想给第一个yield传参，
    //通过函数就可以传参
    gen.next(5);

3 yield的返回值。

3.1 done代表是否完成

    function * show (){
        alert('a')
        yield 12;
        alert('b')
    }
    let gen =show()
    let res1=gen.next()
    console.log(res1)// {done:false, value:12} //done 代表是否完成，代表函数没完成，没到终点。
    let res2=gen.next()
    console.log(res2) // {done:true, value:undefind} //done 代表是否完成，true代表函数完成，已经到终点。undefind是因为最终的结果需要在
    // generator最后的时候return 返回最终结果

3.2 generator最后的return是返回最终结果

    function * show (){
        alert('a')
        yield 12; //yield返回
        alert('b')
        return 100
    }
    let gen =show()
    let res1=gen.next()
    console.log(res1)// {done:false, value:12} //done 代表是否完成，代表函数没完成，没到终点。
    let res2=gen.next()
    console.log(res2) // {done:true, value:100} //done 代表是否完成，true代表函数完成，已经到终点。undefind是因为最终的结果需要在
    // generator最后的时候return 返回最终结果

---