// Promise Ajax方法 function ajax(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { resolve(JSON.parse(xhr.responseText)) } else if (xhr.status === 404) { reject(new Error('404 not found')) } } } xh
1. 什么是宏任务和微任务JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:① 宏任务(macrotask): 宿主环境提供的异步方法都是宏任务script全部代码异步 Ajax 请求setTimeout、setInterval文件操作DOM事件I/OUIrendering② 微任务(microtask):语言标准提供PromiseAsync / AwaitmutationObserverProcess.nextTick(Node独有)2. Event Loop 和DOM渲染console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); new Promise((resolve) => { console.log('promise1'); resolve(); }); const div = document.createElement('div') div.innerHTML = '<h1>hello<
ES6(ECMAScript 2015) 原生提供了 Promise 对象。 Promise 是异步编程的一种解决方法,比传统的回调函数和事件更合理更强大,Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。// Promise 新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。 let promise = new Promise(function (resolve, reject) { console.log('Promise'); // Promise resolve(); }); promise.then(function () { console.log('resolved.'); // resolved. }); console.log('Hi!'); // Promise // Hi! // resolved.1.Promise 的三种状态funct
1.前言JavaScript单线程语言,为了实现主线程的不阻塞,Event Loop这样的方案应运而生,Event Loop 就是异步回调的实现原理。2.JS的执行机制从前往后一行一行执行,如有报错后面代码停止执行先执行完成同步代码再执行异步代码3.Event Loop 执行过程console.log('hi'); setTimeout(function cb1() { console.log('cb1'); }, 5000); console.log('bye'); //先执行同步 //hi //bye //等待5秒后 //cb1同步代码(栈里面的代码)顺序执行,遇到异步代码就记录一下,在此过程中异步代码如果是宏任务移动到Web APIs,直到定时的时间到就放入宏任务队列,即图中的Callback Queue。如果是微任务则放入微任务队列(本例子没有微任务),不会经过Web APIs。如果同步代码执行完,调用栈call stack为空,去查看微任务队列,每执行完一个微任务,它就会从微任务队列出队,直到微任务队列微空后,尝试DOM渲染(如果DOM结构发生变化)。然后Event
Gonwe
心同流水净,身与白云轻