JavaScript 异步 setTimeout promise async await

异步在此就不再赘述，下面主要说一下JS中异步的实现方式。

1，setTimeout 计时器，实现代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function print() {console.log("setTimeOut Run")}console.log("5秒后之后 print函数，打印：setTimeOut Run")setTimeout(print, 5000);</script>
</body>
</html>

2，Promise ，简单用法如下：

Promise 构造函（即function (resolve, reject) { // 要做的事情...}）数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的：

在构造函数中的内容是同步运行。如下

    <script>new Promise(function (resolve, reject) {console.log("new a promise")});console.log("last console")</script>

运行结果如下：

显而易见，先执行console.log("new a promise")，然后执行console.log("last console")

Promise，完成结构如下：

Promise().then().catch().finally()

then内开始异步运行，catch 异常捕捉，finaly 整个代码执行完后执行的代码

 <script>new Promise(function (resolve, reject) {resolve("执行正确")reject("执行错误")}).then(function(str){console.log(str)}).catch(function(str){console.log(str)}).finally(function(){console.log("执行完毕")});console.log("last console")</script>

执行结果如下：

先执行 console.log("last console")

然后执行then，

最后执行 finally。

执行了 resolve 即进入了then，不在执行reject。

如果将resolve和reject换一下位置，执行了reject函数跳到catch 则不会执行 then函数

  <script>new Promise(function (resolve, reject) {reject("执行错误")resolve("执行正确")}).then(function(str){console.log(str)}).catch(function(str){console.log(str)}).finally(function(){console.log("执行完毕")});console.log("last console")</script>

执行结果如下：

由输出结果可以看出，promise中构造函数是同步执行，进入then或者catch后则是异步执行。

再详细说一下promise的用法：

then可以连续使用，前一个then中的返回值是下一个then的输入值，请看示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>new Promise(function(resolve,reject){resolve("resolvefuc")}).then(function(param){console.log(param);return 7;}).then(function(param){console.log(param)})console.log("我后执行，但是我先输出")</script>
</body>
</html>

输出结果：

或者拿到promise对象然后执行then:

 <script>var pro=  new Promise(function(resolve,reject){resolve("resolvefuc")})pro.then(function(param){console.log(param);return 7;}).then(function(param){console.log(param)})console.log("我后执行，但是我先输出")</script>

输出结果：

3，async 用法简单，在定义函数是函数名称前加上async关键字即可，async函数返回一个promise，但是此时是同步执行，请看实例代码：

 <script>async function print(){console.log("async 函数")}console.log(print())</script>

输出结果如下：

由打印结果可以看出，代码是顺序执行的。

函数返回值再调用then即可开始异步执行。

    <script>async function print(){console.log("async 函数")}print().then(function(){console.log("我在结束后被打印")})console.log("结束")</script>

打印结果如下：

async 和 await

await 就是等待异步处理完成，然后向下执行代码。

    function testAwait() {return new Promise((resolve) => {setTimeout(function () {console.log("testAwait");resolve();}, 1000);});}async function helloAsync() {testAwait();console.log("helloAsync");}helloAsync();

执行结果：

执行结果很明显值先执行

console.log("helloAsync"); 再执行 console.log("restawait");

如果加上await 执行顺序发生变化

执行结果

JavaScript 异步 setTimeout promise async await相关推荐

JavaScript 回调函数/Promise/ async/await
并发和并行并行和并发是两个概念,容易混淆是因为并行和并发在中文意思上相近,其实在英文中,这是完全不相同的东西,并行(parallelism).并发(concurrency). 并行(parallel ...
rust异步编程--理解并发/多线程/回调/异步/future/promise/async/await/tokio
1. 异步编程简介通常我们将消息通信分成同步和异步两种: 同步就是消息的发送方要等待消息返回才能继续处理其它事情异步就是消息的发送方不需要等待消息返回就可以处理其它事情很显然异步允许我们同时做更 ...
Promise async/await的理解和用法
Promise && async/await的理解和用法为什么需要promise(承诺)这个东西在之前我们处理异步函数都是用回调这个方法,回调嵌套的时候会发现阅读性和调试的 ...
ES6箭头函数以及promise/async/await测试案例
ES6箭头函数的运用下面以一段代码解释 function one(){return 1 以上函数用箭头函数写步骤,参考下面代码 {}和里面的东西先删去 one = (里面写参数/无参数的里面为空)= ...
js callback promise async await 几种异步函数处理方式
***callback 这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作, ...
如何在 JavaScript 循环中使用 async/await
在循环中迭代循环项和处理异步逻辑(即API调用),可能是我们作为JavaScript开发人员必须执行的两个最常见的任务.本文将讨论的是组合async/await和迭代逻辑的最佳方法. 有时候,你会希望 ...
【面试题】前端人70%以上不了解的promise/async await
前言今天给大家分享promise,笔者将从早期的异步代码的困境.promise出现解决了什么问题.异步回调地狱的终极方案并且实现async await的核心语法,其实async/await只是g ...
JS实现sleep，普通版+promise+async/await
1-1 普通版 function sleep() {var start = new Date()while(new Date() - start <= sleepTime) {}var t1 = ...
JavaScript异步与Promise基本用法(resolve与reject)
Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成 ...

JavaScript 异步 setTimeout promise async await

JavaScript 异步 setTimeout promise async await相关推荐

最新文章

热门文章