浅谈JS三座大山之异步和单线程

单线程

但是我们在开发中，遇到请求网络，或者定时任务的时候，如果等待网络请求结束或者定时任务结束的时候再去做其他事情，这样页面就会卡住，所以js有异步机制解决这个问题。

异步

异步的特点是不会阻塞后面的代码执行，当同步任务执行完毕之后，再执行异步任务。相对的，同步会阻止代码执行。异步任务的应用主要有网络请求和定时任务。

异步是通过callback的方式实现的，在callback里面执行异步执行的代码，但是有一些场景比如我们有三个网络请求abc需要依次执行，在a的回调里发起b请求，在b的回调里发起c请求，这样会造成一种很混乱的写法，称之为回调地狱，可以试想一下，如果页面逻辑过于复杂，需要依次调用10个接口，那么代码的可读性会非常非常差，我们如果看到了别人的这种代码难免内心奔跑一万只神兽。

promise基本用法：

let fun1 = function(flag){
    return new Promise((resolve,reject)=>{
    if(flag){
        setTimeout(() => {
        resolve("success")
        }, 1000);
    }else{
        setTimeout(() => {
        reject("fail")
        }, 1000);
    }
    })
}
　　
fun1(true).then((res)=>{
    console.log(res)//success
}).catch((res)=>{
    console.log(res)
})
fun1(false).then((res)=>{
    console.log(res)
}).catch((res)=>{
    console.log(res)//fail
})

上面是一个最简单的promise函数，promise函数返回一个Promise对象，参数是一个函数，接收两个参数resolve和reject，这两个参数也是函数，当执行resolve()或者reject()的时候，函数返回.

如果执行了resolve(),就会在调用的时候执行then()方法，并接收resove()返回的参数;

如果执行了reject(),就会在调用的时候执行catch()方法，并接收reject()返回的参数;

用promise重新实现一下上面三个网络请求的问题：

let callService = function(url){
      return new Promise((resolve,reject)=>{
          axios.get(url).then((res)=>{
            resolve(res)
          }).catch((err)=>{
            reject(err)
          })

      })
    }
    const url1 = "/user/url1"
    const url2 = "/user/url2"
    const url3 = "/user/url3"
    callService(url1).then((res)=>{
      // do something
      return callService(url2)
    }).then(()=>{
      // do something
      return callService(url3)
    }).then((res)=>{
      // do something
    }).catch((err)=>{
      console.log(err)
    })

用上面的写法重新实现之后，写法上只会有一层，而不会陷入层层的回调之中。

promise.all

promise.all可以将多个promise包装成一个新的实例，成功的时候返回一个数组，谁先失败返回谁的值。

promise.all方法可以帮我们处理日常开发中多接口同时调用的处理问题。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

promise.race

这个方法的作用是多个接口赛跑，哪个跑得快就返回哪个

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)
})

以上就是浅谈JS三座大山之异步和单线程的详细内容，更多关于JS三座大山之异步和单线程的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 一文秒懂nodejs中的异步编程

    文章目录 简介同步异步和阻塞非阻塞javascript中的回调回调函数的错误处理回调地狱 ES6中的Promise什么是PromisePromise的特点Promise的优点Promise的缺点Promise的用法Promise的执行顺序 async和awaitasync的执行顺序async的特点 总结 简介 因为javascript默认情况下是单线程的,这意味着代码不能创建新的线程来并行执行.但是对于最开始在浏览器中运行的javascript来说,单线程的同步执行环境显然无法满足页面点击,鼠标

  • JavaScript异步编程之Promise的初步使用详解

    1. 概述 Promise对象是ES6提出的的异步编程的规范.说到异步编程,就不得不说说同步和异步这两个概念. 从字面意思理解同步编程的话,似乎指的是两个任务同步运行,如果这样理解就错了(至少笔者再没有接触到这个概念的时候有这种误解).同步和异步指的是代码指定执行的顺序(结构化编程范式的执行顺序总是由上至下,由前往后的),如果执行的顺序与代码的相同,就是同步:如果不同,就是异步. 最初,操作系统都是基于命令行的,所有的的语言设计出来也天然是同步的语句,在这种情况下,也不需要异步编程.但是很快,图

  • Node.js中的异步生成器与异步迭代详解

    前言 生成器函数在 JavaScript 中的出现早于引入 async/await,这意味着在创建异步生成器(始终返回 Promise 且可以 await 的生成器)的同时,还引入了许多需要注意的事项. 今天,我们将研究异步生成器及其近亲--异步迭代. 注意:尽管这些概念应该适用于所有遵循现代规范的 javascript,但本文中的所有代码都是针对 Node.js 10.12 和 14 版开发和测试的. 异步生成器函数 看一下这个小程序: // File: main.js const creat

  • JS异步的执行原理和回调详解

    JS异步的执行原理和回调详解

    一.JS异步的执行原理   我们知道JavaScript是单线程的,而浏览器是多线程的.单线程执行任务需要一个个排队进行,假如一个任务需要很长时间执行(像ajax需要较长时间),会直接导致无响应,后面的任务一直在等待执行.这时候就需要用到异步.   想了解异步,首先我们要知道浏览器有最基本的三个常驻线程: JS引擎线程,事件触发线程,GUI渲染线程.   其中JS引擎线程和事件触发线程共同构成了一种事件循环机制,而GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新保

  • 单线程JavaScript实现异步过程详解

    前两天硬着头皮在部门内部做了一次技术分享,主题如题.索性整理成文章留个纪念! 要了解异步实现,首先我们得先了解: 同步 & 异步 同步:会逐行执行代码,会对后续代码造成阻塞,直至代码接收到预期的结果之后,才会继续向下执行任务. 异步:调用之后先不管结果,继续向下执行任务. 网上各种文章对同步和异步的解释也不外如是,但是看文字总是有点晦涩难懂!我就生活化的来比拟一下这两个概念吧! 就好比请人吃饭: 比如你要请两个人吃饭,一个是巴菲特,由于他是举世瞩目股神想请他吃饭的人从这里排到了法国,你为表诚意,

  • Javascript异步编程之你真的懂Promise吗

    Javascript异步编程之你真的懂Promise吗

    前言 在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大.可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论Promise?事实上,有些朋友对于这个几乎每天都在打交道的"老朋友",貌似全懂,但稍加深入就可能疑问百出,本文带大家深入理解这个熟悉的陌生人-- Promise. 基本用法 语法 new Promise( function(resolve, reject) {...} /* executor */ ) 构建 Promise

  • nodejs中的异步编程知识点详解

    简介 因为javascript默认情况下是单线程的,这意味着代码不能创建新的线程来并行执行.但是对于最开始在浏览器中运行的javascript来说,单线程的同步执行环境显然无法满足页面点击,鼠标移动这些响应用户的功能.于是浏览器实现了一组API,可以让javascript以回调的方式来异步响应页面的请求事件. 更进一步,nodejs引入了非阻塞的 I/O ,从而将异步的概念扩展到了文件访问.网络调用等. 今天,我们将会深入的探讨一下各种异步编程的优缺点和发展趋势. 同步异步和阻塞非阻塞 在讨论n

  • 分析JS单线程异步io回调的特性

    我们最开始接触javascript应该大部分是从html中的js脚本开始,但是这种看似简单的语言稀里糊涂的用了好几年,也没有搞清楚它的一些原理机制,有没有躺枪! 起码javascript在操作dom的时候用了各种事件回调,比如按钮,链接的点击,鼠标经过,获取焦点等等. 在这个过程中,我们在dom上绑定一个事件回调函数 比如 onclick="doCheck()" 这个过程就是给dom元素注册了一个click 事件,并且绑定了一个事件回调函数 doCheck(). 当鼠标点击这个元素的时

  • 如何在现代JavaScript中编写异步任务

    前言 在本文中,我们将探讨过去异步执行的 JavaScript 的演变,以及它是怎样改变我们编写代码的方式的.我们将从最早的 Web 开发开始,一直到现代异步模式. 作为编程语言, JavaScript 有两个主要特征,这两个特征对于理解我们的代码如何工作非常重要.首先是它的同步特性,这意味着代码将逐行运行,其次是单线程,任何时候都仅执行一个命令. 随着语言的发展,允许异步执行的新工件出现在场景中.开发人员在解决更复杂的算法和数据流时尝试了不同的方法,从而导致新的接口和模式出现. 同步执行和观察

  • 浅谈JS三座大山之异步和单线程

    单线程 但是我们在开发中,遇到请求网络,或者定时任务的时候,如果等待网络请求结束或者定时任务结束的时候再去做其他事情,这样页面就会卡住,所以js有异步机制解决这个问题. 异步 异步的特点是不会阻塞后面的代码执行,当同步任务执行完毕之后,再执行异步任务.相对的,同步会阻止代码执行.异步任务的应用主要有网络请求和定时任务. 异步是通过callback的方式实现的,在callback里面执行异步执行的代码,但是有一些场景比如我们有三个网络请求abc需要依次执行,在a的回调里发起b请求,在b的回调里发起

  • 浅谈js的ajax的异步和同步请求的问题

    先来看以下代码: var flag=true; var index=0; $.ajax({ url: "http://www.jb51.net/", success: function(data){ flag=false; } }); while(flag){ index++; } alert(index); 请问最后alert的index的结果是多少? 可能有人会说0呗.实际上却没那么简单.大家可以自己试试看.可以看到最终程序进入了一个死循环!怎么会这样呢! 我们在看一段代码: va

  • 浅谈js的异步执行

    1.Javascript语言的执行环境是"单线程"(single thread): 优点:实现起来比较简单,执行环境相对单纯: 缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行. 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 2.&

  • 浅谈js文件引用方式及其同步执行与异步执行

    任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的与加载不同 ) html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的 html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的 html文件中的<script>标签src

  • 浅谈js中的宏任务和微任务

    浅谈js中的宏任务和微任务

    目录 1.关于JavaScript 2.JavaScript事件循环 3.宏任务和微任务 4.拓展宏任务微任务 下面一道关于宏任务和微任务的题: setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); console.log('4') 试问一下上面代码的执行顺序是啥

  • 浅谈Jquery中Ajax异步请求中的async参数的作用

    之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi

  • 浅谈js promise看这篇足够了

    一.背景 大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着.但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入"回调监狱",就容易造成下边的例子: async(1, function(value){ async(value, function(value){ async(value, fu

  • 浅谈JS前端模块化的几种规范

    前言 有这样一个场景,客户端运行很久,但是法务部和数据部需要收集用户的一些信息,这些信息收集好之后需要进行相应的数据处理,之后上报到服务端.客户端提供一个纯粹的js执行引擎,不需要 WebView 容器.iOS 端有成熟的JavaScriptCore.Android 可以使用 V8 引擎.这样一个引擎配套有一个 SDK,访问 Native 的基础能力和数据运算能力,可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力. 问题结束了吗?处理逻辑的时候还需要用到2个库:cheer

  • 浅谈JS运算符&&和|| 及其优先级

    今天看了一段YUI compressor压缩的js代码: userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on"));

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

随机推荐