js异步线程--超级线程

目录

promise

例一

例二

例三

例四

例五--（多线程加载图片，模拟分布式项目）

Genertor

超级线程（必须用*修饰，和关键字yield）

例一

---

---

promise

例一

普通版本：

    {
      //异步线程
      const p = new Promise(function(resolove,reject){
        // resolove("成功");//成功返回调用
        reject("失败");     //失败返回调用
      });
      //调用
      p.then(
        function success(value){
          console.log(value);
        },
        function error(error){
          console.log(error);
        }
        );
     }

箭头函数版本： 

 //箭头函数版本
      const p = new Promise((resolove,reject)=>{
        // resolove("success");
        reject("error");
      }).then(
        value=>{
          console.log(value);
        },
        error=>{
          console.log(error);
        }
      );

例二

一个线程执行操作，执行完毕调用另一个线程显示结果

实例：老王买饼，吃饼

{
        //根据输入的mood的值来决定返回是什么
      const getJianBing = mood => new Promise((resolve,reject)=>{
        if (mood) {
          const JianBing = {
              append:"鸡肉味煎饼",
              money:10
          }
          resolve(JianBing);
        }else{
          const reason = new Error("今天星期不好，所以不带");
          reject(reason);
        }
      });

      //调用
      const askWang = getJianBing(false).then(
        value=>{
          console.log("买的是"+value.append+"需要"+value.money+"钱");
        },
        error=>{
          console.log(error);
        }
        );
    }

例三

一个线程加载图片，一个线程显示图片

 {
      //加载图片 Promise:许诺，承诺
      const loading = url => new Promise((resolve,reject)=>{
          const img = new Image();
          img.src = url;
            //这就是加载方法
          img.onload = () =>resolve(img);
            //加载失败方法
          img.onerror = () =>reject(url);
      });

      //显示图片线程
      //querySelector() 方法仅仅返回匹配指定选择器的第一个元素
      //如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
      const img2 = document.querySelector("img");
      loading("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-004.jpg").then(
          value=>{
            img2.src = value.src;
          }
        )
    }

例四

修改裸板ajax为Promise方法

 const ajax = (url,succ,fail) => {
        const xhr = new XMLHttpRequest;
        xhr.open("GET",url);
        xhr.onreadystatechange = function(){
          if(this.readyState === 4){
            if(this.status === 200){
              succ(this.response);
            }else{
              fail(this.statusText);
            }
          }
        }
        xhr.send();
      }

      //调用
      ajax("http://localhost:8080/AAA/servlet/AAA",function(data){console.log(data)},function(error){console.log(error)});

改写调用方法为promise

//改造调用方法
      new Promise((resolve,reject) => {
        ajax("http://localhost:8080/AAA/servlet/AAA",resolve,reject);
      }).then(
        value => console.log(value);
      );

改写ajax

  //改写之后的ajax
      const ajax = url => new Promise((resolve,reject) => {
        const xhr = new XMLHttpRequest;
        xhr.open("GET",url);
        xhr.onreadystatechange = function(){
          if(this.readyState === 4){
            if(this.status === 200){
              resolve(this.response);
            }else{
              reject(new Error(this.statusText));
            }
          }
        }
        xhr.send();
      })

      //调用
      ajax("http://localhost:8080/AAA/servlet/AAA").then(
            value => {
              console.log(value);
            },
            error => {
              console.log(error);
            }
       );

例五--（多线程加载图片，模拟分布式项目）

 //开启多个线程，同时加多个服务器的图片，当有一个加载完毕，立即通知显示线程，显示图片
      const loadImage = url => new Promise((resolve,reject) => {
        const img = new Image();
        img.src = url;
        img.onload = () => resolve(img);
        img.onerror = () => reject(url);
      });
      const PromiseImage = [loadImage("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-004.jpg"),
                            loadImage("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-005.jpg"),
                            loadImage("http://img.ivsky.com/img/tupian/pre/201804/02/shenmi_dongxue-008.jpg")
                            ];
     

      //多个加载，显示多个
      Promise.all(PromiseImage).then(
          values => {
            values.forEach(
                v => document.body.appendChild(v);
              )
          },
          error => {
            console.log(error);
          }
        )
      
      //多个加载，显示最快的那个
      Promise.race(PromiseImage).then(
          value =>{
            document.body.appendChild(value);  
          },
          error => {
            console.log(error);
          }
        )

Genertor

超级线程（必须用*修饰，和关键字yield）

这种线程，每次执行，都只执行一部分

每次执行到yield的返回值结束，yield前面的部分和下面的代码一起执行这里容易出题

//Genertor
      let tell = function*(){
        yield 'a';
        yield 'b';
        yield 'c';
        yield 'd';
        return 12;
      }

      let k = tell();
      console.log(k.next());
      console.log(k.next());
      console.log(k.next());
      console.log(k.next());
      console.log(k.next());

      // {value: "a", done: false}
      // {value: "b", done: false}
      // {value: "c", done: false}
      // {value: "d", done: false}
      // {value: 12, done: true}

例一

模拟抽奖：每次点击就抽一次，每个人有5次的机会

 //通报剩余抽奖次数的方法
      let draw = function(count){
        //具体事务
        console.log(`剩余${count}次`);
      }

      //抽奖真正的方法
      //每次都执行一次，到了五次以后就等于0
      let resider = function *(count){
        while(count>0){
          count--;
          yield draw(count);
        }
      }
      
      //开始抽奖
      //调用方法
      let start = resider(5);
      //创建一个按钮
      let btn = document.createElement("Button");
      //设置他的ID为
      btn.id = "start";
      //按钮的内容
      btn.textContent = "抽奖";
      //在body里面添加该按钮
      document.body.appendChild(btn);
      //获得该按钮并绑定事件
      document.getElementById("start").addEventListener("click",function(){
        start.next();
      },false);