JavaScript 异步 实现异步的五种实现方法

JavaScript实现异步的五种实现方法

---

---

前言

一、同步和异步是什么？

1.同步任务:

js中的同步任务就是按照顺序执行(可以理解为A------>B,只有一条道路可以到达B)

2.异步任务:

异步肯定与同步不一样.简单来说异步任务就像:到达终点的路多了几条(A地点------->B地点,中间有很多条路可以走.不会造成A----->B地点的主路压力增大)
异步任务 setTimeout setInterval xmlHttprequest 等

二、异步方法有哪些(5种):

 	1.webwork 为了让任务在多线程去执行,防止复杂逻辑阻塞线程
    2.promise 为了让异步任务顺序执行,解决地狱回调
    3.window.fetch H5新增的拉取资源的 api  1.通过.then() 2.数据序列化 3.通过.then()获取数据
    4.jquery.deffered对象 为了让创建的deffered对象的时候和异步任务属于同步代码的结果,并且能够保证deffered和promise进行转换
    5.async和awit 实质上是对Promise()对象提供的 -语法糖-. 让代码更简洁.通过同步代码的形式来实现异步操作

1.webWork(创建分线程)

index.js为加载到html页面中的主线程(js文件)

work.js为在index中创建的分线程

---

 1.werbwork的实现方法
    ①在html中引入index.js主线程
    ②在index.js中 创建分线程  var w =new webwork('work.js')
    ③在index.js中 通过 w.postmesage('数据') 向子线程发送数据
    ④在work.js中  通过onmessage=function(ev){ev.data  postmessage(a)} 接受主线程发送过来的ev.data数据
    ⑤在index.js中 通过onmessage=function(ev){ev.data} ev.data 接受  a 的值.

index.js(主)代码如下（示例）：

//创建一个分线程 work.js
var w = new Worker('work.js')

//主线程向分线程发送数据
w.postMessage(40);

//接受分线程转递过来的数据
w.onmessage = function(ev) {
    console.log(ev);
    console.log(ev.data);
}

work.js(分线程)代码如下（示例）：

function fibo(n) {
    var num = 1;
    var num1 = 1;
    var sum = 0;
    for (let i = 2; i < n; i++) {
        sum = num + num1;
        num = num1;
        num1 = sum;

    }
    return sum;
}

onmessage = function(ev) {
    console.log(ev);
    this.postMessage(fibo(ev.data))
}

---

2.promise(es6方法)

介绍步骤 如下：

2.promise的实现方法(处理异步),解决地狱回调
    ①创建promise实例   var p =new promise((reslove,reject)=>{reslove('res')});
    ②p.then(res=>  console.log(res))
    ③  // reslove(变量) 对应的是 then(变量 => {变量的操作})


	//promise 是对异步任务处理的对象,判断异步任务有没有成功执行的状态
    //resolve , reject 也是两个参数
    //resolve 是调用成功的函数  reject 是调用失败的函数
    //如果不使用 resove 和 reject 两个函数 状态为pendding ---resolve之后变成了 成功状态 fulfilled
    //promise 的then()  在成功状态的时候被触发  resolve(res)  res可以传递参数
    //promise 的catch()  在失败状态的时候被触发 reject(res)  res可以传递参数
    

代码如下（示例）：

 var promise = new Promise((reslove, reject) => {
        setTimeout(() => {
            console.log('执行大量代码');
        }, 2000);
        //resolve('我成功了'); //resolve 之后变成了 成功状态 fulfilled
        // reject('我失败了'); //reject 之后promise状态变为 失败状态
    });
    //promise 的then()  在成功状态的时候被触发  resolve(res)  res可以传递参数
    //promise 的catch()  在失败状态的时候被吃法 reject(err)  err可以传递参数
    promise.then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log(err);
    })

3.Async await 异步的实现方法

介绍步骤 如下(相当于promise用法的语法糖)：

//async 和 await 的使用场景
    //async 与 await 必须连用 , await只能用在async函数里面
    //await作用等待异步任务完成,如果请求数据成功了,执行then函数
    //  async function getData() {
    //      console.log('000');
    //      var book1 = await window.fetch('https://autumnfish.cn/top/artists');
    //      //第二个请求
    //      console.log('1111');
    //      var book2 = await $.get('https://autumnfish.cn/top/artists');
    //      console.log('2222');
    //      return [book1.json(), book2]
    //  };
    //  console.log('aaa');
    //  getData().then(res => {
    //      return res[0];
    //  }).then(res => console.log(res)).catch(err => {
    //      console.log(err)
    //  })

4.window.fetch() 的实现方法

  <script>
    //拉取资源 fetch是 es6新增的一个解决异步的方案, 拉取网络资源

    var url = 'http://123.207.32.32:8000/home/data?type=new&page1';
    //fetch() 返回响应的promise 
    // 第一层then返回的是:响应的报文对象   
    //第二层:如果想要使用第一层的数据,必须把数据序列化  res.json() 返回的对象是一个 Promise对象再进行then()

    window.fetch(url).then(res => {
        console.log(res);
        //将数据序列化
        return res.json()
    }).then(res => console.log(res));
</script>

5.jquery中的deffered对象 的实现方法

<script>
    function cook() {
        console.log('开始做饭');
        var def = $.Deferred() //创建一个jquery延时对象
        setTimeout(() => {
            console.log('做完了');
            /*   def.resolve('烩面'); */
            def.reject('做饭失败')
        }, 2000);
        //返回Deferred()  吧def实例转化成promise实例返回
        //返回可以利用then catch finally 等这些函数
        return def.promise()
    }
    cook().then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    });

    /*    $.get('http://123.207.32.32:8000/home/data?type=new&page1').then(res => {
           console.log(res);
       }).catch(err => console.log(err)); */

    $.get('http://123.207.32.32:8000/home/data?type=new&page1').done(res => {
        console.log(res);
    }).fail(err => console.log(err)).then(() => alert(1213))
</script>

---

总结

提示：这里对文章进行总结：

异步处理方法

1.webwork 为了让任务在多线程去执行,防止复杂逻辑阻塞线程
2.promise 为了让异步任务顺序执行,解决地狱回调
3.window.fetch H5新增的拉取资源的 api  1.通过.then() 2.数据序列化 3.通过.then()获取数据
4.jquery.deffered对象 为了让创建的deffered对象的时候和异步任务属于同步代码的结果,并且能够保证deffered和promise进行转换
5.async和awit 实质上是对Promise()对象提供的 -语法糖-. 让代码更简洁.通过同步代码的形式来实现异步操作


1.werbwork的实现方法
①在html中引入index.js主线程
②在index.js中 创建分线程  var w =new webwork('work.js')
③在index.js中 通过 w.postmesage('数据') 向子线程发送数据
④在work.js中  通过onmessage=function(ev){ev.data  postmessage(a)} 接受主线程发送过来的ev.data数据
⑤在index.js中 通过onmessage=function(ev){ev.data} ev.data 接受  a 的值.

2.promise的实现方法(处理异步),解决地狱回调
①创建promise实例   var p =new promise((reslove,reject)=>{reslove('res')});
②p.then(res=>  console.log(res))
③  // reslove(变量) 对应的是 then(变量 => {变量的操作})

3.window.fetch() 的实现方法
①window.fetch('url').then(
     console.log(res)
     return res.json() //必须序列化  返回的是一个respones对象
)
4.async 和 awit的使用方法:
 async function f2() {
    var books = await $.get('https://autumnfish.cn/top/artists');
    return books
};
f2().then(res => {
    console.log(res);
}) 
5.jquery的jquery.deffered对象上面有介绍,就不做总结了