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