// 1.Promise
{
// Promise
function ajax() {
return new Promise((resolve, reject) => {
let name = "to";
setTimeout(() => resolve(name),1000);
})
};
/**
* ajax()
* .then(() => {
console.log("first");
let name = "kk";
let id = 12;
return new Promise((resolve, reject) => {
resolve(name);
console.log(id);
})
}).then((sk) => {
console.log(sk);
})
*/
// Promise.all Promise.race
const url1 = "https://www.baidu.com/img/baidu_jgylogo3.gif";
const url2 = "https://www.baidu.com/img/bd_logo1.png?qua=high";
const url3 = "https://cn.vuejs.org/images/logo.png";
function getImage(imgurl) {
return new Promise((resolve, reject) => {
const img = document.createElement("img");
img.src = imgurl;
img.onload = () => resolve(img); // 图片加载到的事件
let err = new Error("数据源出错");
img.onerror = (err) => reject(err); // 加载出错事件
})
};
function showImg(imgs) {
imgs.forEach( item => {
document.body.appendChild(item);
})
};
function showRaceImg(img) {
document.body.appendChild(img);
};
//Promise.all(): 全部的promise的状态改变完成再进行then调用
Promise.all([
getImage(url1),
getImage(url2),
getImage(url3)
]).then( imgs => showImgs(imgs))
//Promise.race(): 只要有一个promise的状态改变就进行then调用
Promise.race([
getImage(url1),
getImage(url2),
getImage(url3)
]).then( imgs => showImgs(imgs))
}
// 2.Iterator
{
const arr = [1, 2, 3];
for(let val of arr) {
console.log("val---->",val);
};
// Iterator 默认存放在数据集合的Symbol.iterator属性里,本质是一个方法
const fn = arr[Symbol.iterator]();
console.log(fn.next()); // 第一次调用时生成一个遍历器对象指向第一个数据
console.log(fn.next());
console.log(fn.next());
console.log(fn.next());
// 原生支持iterator的数据集合有: array/string/set/map 函数中的argument支持iterator的数据集合都可以使用 for...of循环
const obj = {
name: "apple",
id: 12,
price: 45,
[Symbol.iterator]() {
let index = 0;
let value = Object.values(this);
return {
next() {
if(index < values.length) {
return {
value: values[index++],
done: false,
}
}else {
return {
done: true
}
}
}
}
}
}
for( let val of obj) {
console.log("obj---->",val);
}
}
// 3.Generator
{
const Say = function* () {
yield "a"
yield "b"
yield "c"
};
const fn = say();
console.log("fn.next()---->",fn.next());
console.log("fn.next()---->",fn.next());
console.log("fn.next()---->",fn.next());
console.log("fn.next()---->",fn.next());
}
{
// 实现Object的iterator接口 进行for...of 循环
const obj = {
name: "vue",
price: 54,
id: 123,
a: 1
};
obj[Symbol.iterator] = function* () {
for( let key of Object.keys(obj)) {
yield obj[kay];
}
};
for(const val of obj) {
console.log("obj---->",val);
};
}
{
// 任何时候都要一定数量的状态
const state = function* () {
while(1) {
yield "success"
yield "fail"
yield "pending"
}
};
const status = state();
console.log("status.next()--->",status.next());
console.log("status.next()--->",status.next());
console.log("status.next()--->",status.next());
console.log("status.next()--->",status.next());
console.log("status.next()--->",status.next());
console.log("status.next()--->",status.next());
console.log("status.next()--->",status.next());
}
{
// 长轮询
function fn1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("查询中");
resolve({ code: 1 });
}, 1000)
})
};
const ajax = function* () {
yield fn1();
};
function autoAjax() {
const status = ajax().next();
status.value.then(res => {
if(res.code === 1){
console.log("用户付款成功");
}else {
console.log("未付款");
setTimeout( autoAjax(), 500);
}
})
};
autoAjax();
}
// 长轮询
function fn1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("查询中");
resolve({ code: 1 });
}, 1000)
})
};
function autoAjax() {
fn1().then(res => {
if(res.code === 1){
console.log("用户付款成功");
}else {
console.log("未付款");
setTimeout( autoAjax(), 500);
}
})
};
autoAjax();
}
{
// Generator 函数异步编程
const ajax = function* () {
console.log("任务start");
yield function(cb) {
setTimeout( () => {
console.log("异步任务执行结束");
cb && cb();
}, 1000 )
console.log("end");
};
};
const fn = ajax();
const first = fn.next();
first.value( () => fn.next() )
}
// 4.async/await
{
async function fn1() {
await console.log(11);
await console.log(22);
await console.log(33);
};
fn1();
}
{
function fn1() {
setTimeout(() => {
console.log("fn1-->",task1);
}, 1000)
};
function fn2() {
setTimeout(() => {
console.log("fn2-->",task2);
}, 1000)
};
function fn3() {
setTimeout(() => {
console.log("fn3-->",task3);
}, 1000)
};
async function init() {
await fn1();
await fn2();
await fn3();
};
init();
}
{
function fn1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("任务1");
resolve();
}, 1000)
})
};
function fn2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("任务2");
resolve();
}, 1000)
})
};
function fn3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("任务3");
resolve();
}, 1000)
})
};
async function init() {
await fn1();
await fn2();
await fn3();
};
init();
}
{
async function init() {
const str = "lucy";
let a1 = await new Promise((resolve, reject) => {
setTimeout(() => {
console.log(1);
resolve(str);
}, 1000)
});
await new Promise(resolve => {
setTimeout(() => {
console.log(a1);
resolve();
}, 1000)
});
};
init();
}
异步编程(Promise,Iterator,Generator,async/await)
最新推荐文章于 2023-03-06 22:57:25 发布