异步编程

虽然已经可以使用jweb worker支持了多线程，但是主流的js开发仍然是异步编程

采用单线程模式工作的原因
因为js设计初衷用于浏览器的脚本语言，为了实现页面交互就必须要进行dom操作，所以js必须使用单线程模式，否则就会出现一些问题。比如我即修改一个元素又同时删除了该元素。

同步模式和异步模式

同步就是排队执行，代码顺序执行。异步就是不会等待这个任务的结束才开始下一个任务，开启过后就立即开始执行下一个任务，后续逻辑通过回调函数的方式定义执行。

回调函数

所有异步编程方案的根基

因为js中，函数是一等公民，我们可以将函数作为参数进行传递，并且在函数内部执行完一些任务后，再去执行参数函数。那么就可以由调用者定义，交给执行者执行的函数就叫做回调函数
但是回调函数很不容易阅读，不停的进行参数传递形成多层级的传递回调地狱。

Promise

promise就是一个对象，表示一个异步任务最后是成功还是失败。

const promise = new Promise((resolve，reject) => {// 这里是兑现承诺的逻辑resolve()//成功reject(new Error("error"))//失败
})
promise.then((val) => {
// resolve的结果一定会进入.then后面的第一个回调函数，reject进入第二个回调函数
// catch和rejected 的区别是如果网络异常则会进入catch而不会进入rejectedconsole.log('resolved', val)
},(err) => {console.log('rejected', err)
}).catch(() => {})

注意当你使用promise时要完全抛弃嵌套使用promise，否则就违背了promise的初衷，还不如直接使用callback，promise具有链式调用特点，保证了异步的扁平化。
promise目前用于封装工具时常用，开发时我们有更加方便的async和await
如果在链式调用时过程中出现了一个异常，那么我们只需要在最后一次then方法中去捕获即可。

我们在全局可以使用以下监听事件，监听没有进行异常处理的promise抛出的异常

window.addEventListener('unhandlerejection', event => {const {reason, promise} = eventconsole.log(reason, promise)// reson 失败原因// promise 出现异常的对象event.preventDefault()
}, false)

Generator异步方案

使用方法

function * foo () {console.log("foo")const res = yield 'foo' //暂停执行，等待外部调用next函数继续向下执行try {console.log(res)} catch (e) {console.log(e)}
}const generator = foo()
const result = generator.next()
console.log(result)// generator.next('bar') //这个会被yield接收到resgenerator(new Error('err')) // 会被catch捕获

生成器函数的执行器

function * main () {const user = yield ajax('/user')console.log(user) //打印dataconst post = yield ajax('/post')console.log(post) //打印data2
}
const generator = main()
const res = generator.next()res.value.then(data => {const res1 = generator.next(data)if(res1.done) return  res1.value.then(data2 => {const res2 = generator.next(data2)if(res2.done) return })
})

使用递归的方式生成器函数的执行器

function * main () {try {const user = yield ajax('/user')console.log(user) //打印dataconst post = yield ajax('/post')console.log(post) //打印data2} catch (e) {console.log(e)}
}
const generator = main()function handleResult(result) {if(result.done) returnresult.value.then(data => {handleResult(generator.next(data))}, err => {generator.throw(err)})
}handleResult(generator.next())//封装 社区中有co库
function co(g) {const generator = g()function handleResult(result) {if(result.done) returnresult.value.then(data => {handleResult(generator.next(data))}, err => {generator.throw(err)})}handleResult(generator.next())
}

Async/Await 语法糖

async/await是Generator的语法糖，使用起来更加方便，开发中最为常用
async函数抛出一个promise对象，同时支持链式调用
await只能出现在async当中，在最外层直接使用await的功能目前正在开发，未来可能可以直接使用await

javascript的异步编程相关推荐

java 异步得到函数返回值_使用JavaScript进行异步编程
毫无疑问,虽然JavaScript的历史比较悠久,但这并不妨碍它成为当今最受欢迎的编程语言之一.对刚接触该语言的人来说,JavaScript的异步特性可能会有一些挑战.在本文中,我们将了解和使用Pro ...
html5异步编程,一位前端菜鸟对于JavaScript同步异步编程的了解
来自一个前端菜鸟的对于JavaScript同步异步编程的了解,以下内容,仅供参考.大家知道,JavaScript的执行环境是单线程的,单线程的好处是执行环境简单,不用去考虑诸如资源同步,死锁等多线程阻 ...
写给初学者的JavaScript异步编程和背后思想
导读: 对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了 ...
Javascript异步编程之一异步原理
本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...
网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
从根本上了解异步编程体系
作者:ronaldoliu,腾讯 IEG 后台开发工程师或许你也听说了,摩尔定律失效了.技术的发展不会永远是指数上升,当芯片的集成度越来越高,高到 1 平方毫米能集成几亿个晶体管时,也就是人们常说的 ...
Promise异步编程
异步编程Promise 1.异步编程 2,回调函数 3,回调地狱 4,Promise 4.1,prmise的语法格式: 4.2,Promise链式 4.3,Promise.all() 1.异步编程有 ...
JavaScript 异步编程--Generator函数、async、await
JavaScript 异步编程–Generator函数 Generator(生成器)是ES6标准引入的新的数据类型,其最大的特点就是可以交出函数的执行的控制权,即:通过yield关键字标明需要暂停的语 ...
深入理解javascript异步编程障眼法h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...

javascript的异步编程

异步编程

同步模式和异步模式

回调函数

Promise

Generator异步方案

Async/Await 语法糖

javascript的异步编程相关推荐

最新文章

热门文章