IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 异步 -> 正文阅读

[JavaScript知识库]JavaScript 异步

异步在此就不再赘述,下面主要说一下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对象:

 <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 用法 稍后更新……

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-24 09:20:29  更:2022-04-24 09:23:43 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 1:18:26-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码