Promise
async
try 中
默认 最后一行 为 返回值
没写--return undefined .then(resolve=>resolve(undefined))
return 'aa' .then(resolve=>resolve(aa)) ======
return Promise.resolve(v) .then(resolve=resolve(v)>)
catch 中
return ‘aa’ .then(resolve=>resolve(aa)) 解决了
return Promise.reject(error) catch 到 =======
export const useQQLoginSavePush = async apiFn => {
try {
const { result } = await apiFn()
return 'success'
} catch (error) {
return Promise.reject(error)
}
}
Promise.all
可以看做 接收 P 数组并行执行以最晚的 P 为 时间结点 传入的 P数组 必须全部是 fullfilled状态,或者传入之前 try catch
返回 v 数组 按 传入顺序 返回
Promise.allSettled
接收 P 数组 可以不是 fullfilled状态 结果 筛选出 resolve 的 v
Promise.race
接收 P 数组 谁快 执行谁
1.timeout方法
function timeout(delay = 1000) {
return new Promise(resolve => setTimeout(resolve, delay));
}
timeout(2000)
.then(() => {
console.log("houdunren.com");
return timeout(2000);
})
.then(value => {
console.log("hdcms.com");
});
2.interval方法
<script>
function interval(delay = 1000, callback) {
return new Promise(resolve => {
let id = setInterval(() => {
callback(id, resolve);
}, delay);
});
}
interval(100, (id, resolve) => {
const div = document.querySelector("div");
let left = parseInt(window.getComputedStyle(div).left);
div.style.left = left + 10 + "px";
if (left >= 200) {
clearInterval(id);
resolve(div);
}
})
.then(div => {
return interval(100, (id, resolve) => {
let width = parseInt(window.getComputedStyle(div).width);
div.style.width = width - 10 + "px";
if (width <= 20) {
clearInterval(id);
resolve(div);
}
});
})
.then(div => {
div.style.backgroundColor = "red";
});
</script>
3.接口数据缓存
Promise.hd = function(value) {
return new Promise(resolve => {
resolve(value);
});
};
Promise.hd("后盾人").then(value => {
console.log(value);
});
function query(name) {
//函数也是一个对象 所以可以 query.cache
const cache = query.cache || (query.cache = new Map());
if (cache.has(name)) {
console.log("走缓存了");
return Promise.resolve(cache.get(name));
}
return ajax(`http://localhost:8888/php/user.php?name=${name}`).then(
user => {
cache.set(name, user);
console.log("没走缓存");
return user;
}
);
}
query("后盾人").then(user => {
console.log(user);
});
4.promise.all妙用多次请求数据
//根据用户批量获取用户资料
function getUsers(names) {
let promises = names.map(name => {
return ajax(`http://localhost:8888/php/user.php?name=${name}`);
});
return Promise.all(promises);
}
getUsers(["后盾人"]).then(users => {
console.log(users);
});
5.promise.allSettled过滤请求成功的数据
let promises = ["后盾人", "李四"].map(name => {
return ajax(`http://localhost:8888/php/user.php?name=${name}`);
});
Promise.allSettled(promises).then(values => {
let users = values.filter(user => {
return user.status == "fulfilled";
});
console.log(users);
});
6.promise队列
function queue(num) {
let promise = Promise.resolve();
num.map(v => {
promise = promise.then(_ => {
return v();
});
});
}
function p1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("p1");
resolve();
}, 1000);
});
}
function p2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("p2");
resolve();
}, 1000);
});
}
queue([p1, p2]);
7.reduce实现
function queue(num) {
num.reduce((promise, n) => {
return promise.then(_ => {
return new Promise(resolve => {
setTimeout(() => {
console.log(n);
resolve();
}, 1000);
});
});
}, Promise.resolve());
}
queue([1, 2, 3, 4]);
8.promise封装接口并渲染到页面
class User {
ajax(user) {
let url = `http://localhost:8888/php/user.php`;
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("GET", `${url}?name=${user}`);
xhr.send();
xhr.onload = function() {
if (this.status == 200) {
resolve(JSON.parse(this.response));
} else if (this.status == 404) {
reject(new HttpError("用户不存在"));
} else {
reject("加载失败");
}
};
xhr.onerror = function() {
reject(this);
};
});
}
render(users) {
users.reduce((promise, user) => {
return promise
.then(_ => {
return this.ajax(user);
})
.then(user => {
return this.view(user);
});
}, Promise.resolve());
}
view(user) {
return new Promise(resolve => {
let h2 = document.createElement("h2");
h2.innerHTML = user.name;
document.body.appendChild(h2);
resolve();
});
}
}
new User().render(["后盾人", "向军"]);