javascript中的异步调用，promise对象，async/await用法

原生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

javascript中的异步调用，promise对象，async/await用法相关推荐

解决异步问题，教你如何写出优雅的promise和async/await，告别callback回调地狱！
解决异步问题--promise.async/await 一.单线程和异步 1.单线程是什么 2.为什么需要异步 3.使用异步的场景二.promise 1.promise的三种状态 2.三种状态的表现 ...
JavaScript中的异步、同步
要理解JS中的异步.同步,需要先了解JS代码的执行过程和Event Loop. JavaScript代码的执行过程程序需要执行的操作都会被放入Call Stack(A LIFO (Last In, ...
C#中的异步调用剖析
我上次写创建线程的时候就想写一篇深入异步调用的笔记,但是由于当时对windows的进程与线程的概念不太清楚,没敢写,今天我仔细的分析并调试了一下C#中的异步调用的四种方法.把学习笔记分享出来. 假如要 ...
Spring Boot 中启用异步调用
在Java中一般开发程序都会同步调用的,程序中代码是一行一行执行下去的,每一行代码需要等待上一行代码执行完成才能开始执行. 在异步编程中,代码执行不是阻塞的,在方法调用中不需要等待所有代码执行完毕就可 ...
Spring Boot 中的异步调用
Spring Boot 中的异步调用通常我们开发的程序都是同步调用的,即程序按照代码的顺序一行一行的逐步往下执行,每一行代码都必须等待上一行代码执行完毕才能开始执行.而异步编程则没有这个限制,代码的 ...
【异步系列四】async await 原理解析之爱上 async/await
前言异步编程一直是 JavaScript 中比较麻烦但相当重要的一件事情,一直也有人在提出各种方案,试图解决这个问题. 从回调函数到 Promise 对象,再到 Generator 函数,每次都有所 ...
es6 --- promise和async/await的区别
首先需要了解async函数: async是Generator函数的语法糖: // 使用Generator依次读取两个文件 var fs = require('fs'); var readFile = ...
async/await用法详解
ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async函数的定义方式 // 函数声明 async function fn() {}// 函数表达式 const fn = a ...
使用fetch封装ajax_如何使用Fetch在JavaScript中进行AJAX调用
使用fetch封装ajax I will be sharing bite sized learnings about JavaScript regularly in this series. We'l ...