原生javascript中的的回调函数
即callback 就是通过回调函数来通知主程序
对于io 密集的非常好用:eg. file,DB读写,网络访问
异步:
javascript就是个单线程语言,
回调函数看上执行了支线程,但都在一个主线程中运行
不需要考虑线程同步,资源竞争的问题,线程切换,
多个异步操作,就会套娃,回调地狱
promise:
为了解决回调地狱,用fetch()获取服务器数据,动态更新页面内容,
优点是将多个异步操作 以链式结构串联起来
fetch("http://....")
.then((response) => { response.json() }) //response.json() 就是另外一个promise,将返回的数据转换称json格式
这个就是C# 的task
.then( (json) => { console.log(json)}) //json 是上一行返回的
.catch( (error) => { }) //捕获异常,放在链式末尾,网络异常,和同步编程的try catch块很类似
.finally( () => {
stopLoadingAnimation();//如果有加载动画,可以在finally中关闭它
})
async/await:
javascript ecma17中加入的两个关键字,
是promise 之上的语法糖,
首先用async 将function f() 标记为异步函数
async function f(){
const response = await fetch("https://...."); //不需要使用then, 而是使用await, response 已经是服务器返回的数据了,
const json = await response.json();
console.log(json); // 1
}
f() // 注意: 这个函数的返回值永远是promise 对象
//或者更简洁的方法:
( async () => {
await someAsyncFunction();
})
1.虽然看上去会block 函数执行,但实际上页面还是可以操作的,例如一个toggle, 即在等待过程中js同样可以处理其他任务,比如更新界面,运行其他代码等
因为await 底层是基于promise 和事件循环机制实现的
async function f(){
const promiseA = fetch("http://...");
const promiseB = fetch("http://...");
const [a,b] = await Promise.all([promiseA, promiseB]);
}
foreach() {
await fetch(…); //不work
}
//await 组织在异步函数中才有效,
await someAsyncOperation(); //×
有了async/await 就不需要写promise 底层代码,
但某些旧版浏览器不支持 async 语法,我们可以使用转译器(transpiler, 也是babel) 将其兼容到ie
原视频参考:
https://m.biilbili.com/video/BV1WP4y187Tu?p=1