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

文章目录

JavaScript实现异步的五种实现方法
前言
一、同步和异步是什么？
- 1.同步任务:
- 2.异步任务:
二、异步方法有哪些(5种):
- 1.webWork(创建分线程)
- 2.promise(es6方法)
- 3.Async await 异步的实现方法
- 4.window.fetch() 的实现方法
- 5.jquery中的deffered对象的实现方法
总结
- 异步处理方法

前言

一、同步和异步是什么？

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对象上面有介绍,就不做总结了

JavaScript 异步实现异步的五种实现方法相关推荐

(转)javascript异步编程的四种方法
本文转自:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 作者:阮一峰本文仅仅作为个人mark ...
JavaScript 数组遍历的五种方法（转）
转自:JavaScript 数组遍历的五种方法这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下在使用 JavaS ...
JavaScript数组去重的五种方法
JavaScript数组去重的五种方法先简单准备一个数组,用于方法的实验: let array = [1,1,2,3,4,4,1,5,6,6,7,7,7]; console.log(`去重前的数组: ...
程序员成长之旅——同步IO和异步IO（五种IO模型）
程序员成长之旅--同步IO和异步IO(五种IO模型) 同步和异步同步异步消息通知场景比喻阻塞和非阻塞阻塞非阻塞事例同步IO 阻塞IO 非阻塞IO 信号驱动IO 多路转接IO 异步IO ...
java中的五种排序方法_用Java排序的五种有用方法
java中的五种排序方法 Java排序快速概述: 正常的列表: private static List VEGETABLES = Arrays.asList("apple", &q ...
linux安装中文乱码怎么解决方法,Linux安装GBK/GB2312程序显示乱码的五种解决方法...
不少用户在Linux系统中安装GBK或GB2312的时候遇到了乱码问题,这主要是系统默认语言是uft8所导致,对于该问题可用五种方法进行解决,接下来是小编为大家收集的Linux安装GBK/GB2312 ...
python list方法说明_对python中list的五种查找方法说明
Python中是有查找功能的,五种方式:in.not in.count.index,find 前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hell ...
python list find函数_对python中list的五种查找方法说明
Python中是有查找功能的,五种方式:in.not in.count.index,find 前两种方法是保留字,后两种方式是列表的方法. 下面以a_list = ['a','b','c','hell ...
服务器系统记事本乱码,win7系统记事本出现乱码的五种解决方法
win7系统自带有记事本功能,它是一个简单的文字编辑器,用户可直接打开记事本记录文字,相信大家对雨林木风win7系统的记事本在熟悉不过.然而有不少win7系统用户在打开记事本的时候出现乱码,这是怎么回 ...

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

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

文章目录

前言

一、同步和异步是什么？

1.同步任务:

2.异步任务:

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

1.webWork(创建分线程)

2.promise(es6方法)

3.Async await 异步的实现方法

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

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

总结

异步处理方法

JavaScript 异步实现异步的五种实现方法相关推荐

最新文章

热门文章

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

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

文章目录

前言

一、同步和异步是什么？

1.同步任务:

2.异步任务:

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

1.webWork(创建分线程)

2.promise(es6方法)

3.Async await 异步的实现方法

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

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

总结

异步处理方法

JavaScript 异步 实现异步的五种实现方法相关推荐

最新文章

热门文章

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

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

JavaScript 异步实现异步的五种实现方法相关推荐