用什么软件做网站好,网站左侧分类菜单怎么做,做美图 网站,最好的手机资源网站一、同步和异步
1、JS 是单线程语言
JavaScript 是一门单线程的语言#xff0c;因此同一个时间只能做一件事情#xff0c;这意味着所有任务都需要排队#xff0c;前一个任务执行完#xff0c;才会执行下一个任务。但是#xff0c;如果前一个任务的执行时间很长#xff…一、同步和异步
1、JS 是单线程语言
JavaScript 是一门单线程的语言因此同一个时间只能做一件事情这意味着所有任务都需要排队前一个任务执行完才会执行下一个任务。但是如果前一个任务的执行时间很长那么后一个任务就需要一直等待这样就会造成页面的渲染不连贯严重影响用户体验。
因此JavaScript 在设计的时候就已经考虑到这个问题主线程无需等待这些耗时任务执行完成此时这些耗时任务正在执行中先运行排在后面的任务等到这些耗时任务有了结果后再回过头执行他们因此所有任务可以分成两种一种是同步任务另一种是异步任务。总结因为是单线程所以必须异步。
2、同步任务和异步任务
同步任务指的是在主线程上排队执行的任务只有前一个任务执行完毕才能执行后一个任务。
异步任务指的是不进入主线程而进入”任务队列”task queue的任务只有”任务队列”通知主线程某个异步任务可以执行了该任务才会进入主线程执行。
他们的区别就是在这条主线程上执行顺序的不同。全部同步任务执行完成后才会去执行异步任务遇到同步任务如果他不执行程序会卡在那后面的任务无法执行遇到异步任务程序不会卡住而是继续执行后面的任务。
总结如果同步任务没有执行完异步任务是不会执行的。
3、事件循环机制
JS 是单线程运行的异步是基于回调函数实现的事件循环机制Event Loop就是异步回调实现的原理。
JavaScript 运行机制别名事件循环EventLoop
所有同步任务都在主线程上执行行成一个执行栈。主线程之外还存在任务队列只要异步任务有了结果就会在任务队列中放置对应的任务回调函数等待执行。一旦执行栈中的所有同步任务执行完毕JS 引擎会判断任务队列中是否有任务可以执行如果有则该任务结束等待状态进入执行栈开始执行。主线程不断的重复上面的第三步。 总结只要主线程空了就会去读取”任务队列”这个过程是循环不断的这就是 JavaScript 的异步执行机制也叫事件循环。
注意点
异步任务和异步任务的回调函数不一样任务队列存放的是异步任务的回调函数。
放入任务队列的时机并不是一遇到异步任务就放入若遇到异步任务则将其放置到宿主环境中。如果在宿主环境中的异步任务达到了执行的条件则将所要执行的回调函数放入任务队列中比如说遇到了一个1s的定时器setTimeout那就是1s后才将回调函数放到任务队列中。
栈是一种先出后出的数据结构压在栈底的最慢被执行队列是一种先进先出的数据结构先去到队列的任务优先被执行。
4、微任务和宏任务
异步任务分为 微任务 和 宏任务也就是任务队列分为 微任务队列 和 宏任务队列。
微任务的触发时机是早于宏任务的因为微任务是在 DOM 渲染前执行宏任务是在 DOM 渲染后执行。
微任务 PromiseasyncawaitnextTick 等等
宏任务 setTimeoutsetIntervalajaxDOM事件 等等
二、Promise 基本了解
1、Promise 的含义
Promise 是异步编程的一种解决方案比传统的解决方案回调函数和事件更合理和更强大。它由社区最早提出和实现ES6 将其写进了语言标准统一了用法原生提供了 Promise 对象。
所谓 Promise简单说就是一个容器里面保存着某个未来才会结束的事件通常是一个异步操作的结果。从语法上说Promise 是一个对象从它可以获取异步操作的消息。Promise 提供统一的 API各种异步操作都可以用同样的方法进行处理。
Promise 对象的特点
1对象的状态不受外界影响。
Promise 对象代表一个异步操作有三种状态等待状态pending、成功状态resolved、失败状态rejected。只有异步操作的结果可以决定当前是哪一种状态任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来它的英语意思就是“承诺”表示其他手段无法改变。
2一旦状态改变就不会再变任何时候都可以得到这个结果。
Promise 对象的状态改变只有两种可能从 pending 变为 fulfilled 和从 pending 变为 rejected 。只要这两种情况发生状态就凝固了不会再变了会一直保持这个结果这时就称为 resolved已定型。如果改变已经发生了你再对 Promise 对象添加回调函数也会立即得到这个结果。这与事件Event完全不同事件的特点是如果你错过了它再去监听是得不到结果的。
Promise 对象的优点
1实现了将异步操作以同步操作的流程表达出来避免了层层嵌套的回调函数。回调地狱
2提供统一的接口使得控制异步操作更加容易。
Promise 对象的缺点
1无法取消 Promise一旦新建它就会立即执行无法中途取消。
2如果不设置回调函数Promise 内部抛出的错误不会反应到外部。
3当处于 pending 状态时无法得知目前进展到哪一个阶段刚刚开始还是即将完成。
2、基本用法
ES6 规定Promise 对象是一个构造函数用来生成 Promise 实例。
Promise 构造函数接受一个函数作为参数该函数的两个参数分别是 resolve 和 reject。它们是两个函数由 JavaScript 引擎提供不用自己部署。
参数说明resolve 函数将 Promise对象的状态从等待状态 - 成功状态在异步操作成功时调用并将异步操作的结果作为参数传递出去会触发后续的 then 回调函数。reject 函数将 Promise对象的状态从等待状态 - 失败状态在异步操作失败时调用并将异步操作报出的错误作为参数传递出去会触发 catch 回调函数。
// 这里的 resolve reject 只是一个形参可以取任意名字但是我们约定直接使用 resolve reject 。
const promise new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value)} else {reject(error)}
})Promise 新建后就会立即执行。
let promise new Promise(function(resolve, reject) {console.log(Promise)resolve()
})promise.then(function() {console.log(resolved.)
})console.log(Hi!)// Promise
// Hi!
// resolved上面代码中Promise 新建后立即执行所以首先输出的是 Promise。然后then 方法指定的回调函数将在当前脚本所有同步任务执行完才会执行所以 resolved 最后输出。
调用 resolve 或 reject 并不会终结 Promise 的参数函数的执行。
new Promise((resolve, reject) {resolve(1)console.log(2)
}).then(r {console.log(r)
})
// 2
// 1上面代码中调用 resolve(1) 以后后面的 console.log(2) 还是会执行并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行总是晚于本轮循环的同步任务。
一般来说调用 resolve 或 reject 以后Promise 的使命就完成了后继操作应该放到 then 方法里面而不应该直接写在 resolve 或 reject 的后面。所以最好在它们前面加上 return 语句这样就不会有意外。
new Promise((resolve, reject) {return resolve(1)// 后面的语句不会执行console.log(2)
})三、Promise.prototype.then()
Promise 实例具有 then 方法也就是说then 方法是定义在原型对象 Promise.prototype 上的。它的作用是为 Promise 实例添加状态改变时的回调函数。
then 方法的第一个参数是 resolved 状态的回调函数第二个参数是 rejected 状态的回调函数它们都是可选的。
1、then 方法的两个回调函数什么时候执行。
pending - resolved 时执行 then 的第一个回调函数
pending - rejected 时执行 then 的第二个回调函数。
2、then 方法执行后的返回值。
then 方法执行后默认自动返回一个新的 Promise 对象。
3、then 方法返回的 Promise 对象的状态改变。
then 方法其实默认返回的是 undefined即return undefined但是 ES6 的机制规定当 then 返回 undefined 时那么会将这个 undefined 包装成一个 Promise并且这个 Promise 默认调用了 resolve() 方法成功态并且把 undefined 作为了 resolve() 的参数相当于
const p new Promise((resolve, reject) {resolve()
})
p.then(() {// 默认会执行这一条// return undefined
}, () {
})// 实际上return 会包装为一个 Promise 对象同时默认执行 resolve()并把 return 的值作为 resolve() 的参数
/*
return new Promise(resolve {resolve(undefined);
})
*/// -----------------------------
// 如果我们在这个返回的 Promise 上继续调用 then 方法并接收参数的话可以发现 then 中成功接收到了被 Promise 包装后的参数
const p2 new Promise((resolve, reject) {resolve()
})
p2.then(() {// 默认会执行这一条// return undefined
}).then(data {console.log(data) // 打印 undefinedreturn 24 // 手动 return 一个值// 相当于return new Promise(resolve {resolve(24)})
}).then((data) {console.log(data) // 打印 24
})如果我们要让 then 返回一个失败状态的 Promise那么我们可以手动 return 一个 Promise 并执行 reject() 方法。
const p3 new Promise((resolve, reject) {resolve()
})
p3.then(() {// 手动返回一个调用了 reject 的 Promisereturn new Promise((resolve, reject) {reject(失败)})
}).then(() {}, errData {console.log(errData) // 失败
})总结 Promise 是一个构造函数需要 new 才能使用。在 new Promise() 的时候需要传递一个匿名回调函数作为 Promise() 唯一的参数这个回调函数有两个参数 resolve reject这两个参数也是函数当回调函数执行第一个 resolve 函数后 Promise 便变为了成功状态反之回调函数执行了 reject 后 Promise 便变为了失败状态且每个 Promise 只能要么执行 resolve要么执行 reject不能同时执行当 Promise 被 new 之后就会有一个 then 方法该方法默认接收两个匿名回调函数作为参数其中第一个回调函数是在 Promise 为成功状态时自动调用的反之第二个回调函数是在 Promise 为失败状态时自动调用的并且这两个回调函数是可以接收参数的参数就来自于 resolve 或 reject 调用时传递的实参在 then 方法执行后会默认返回 undefined在没有指定返回值的情况下ES6 会将其包装为一个新的成功态的 Promise该 Promise 会自动执行 resolve 函数该函数的参数来自于 then 方法的返回值如果没有返回值那么默认就返回 undefined。如果需要返回一个失败态的 Promise那么需要在 then 中手动指定返回值return new Promise((resolve, reject) { reject(参数) } 四、Promise.prototype.catch()
Promise.prototype.catch() 方法是 .then(null, rejection) 或 .then(undefined, rejection) 的别名用于指定发生错误时的回调函数。
new Promise((resolve, reject) {reject(失败)
}).then(res {console.log(res)
}).catch(err {console.log(err) // 失败
})// -------------------------------------
// 上面的代码本质上等同于
new Promise((resolve, reject) {reject(失败)
}).then(res {console.log(res)
}).then(null, err {console.log(err) // 失败
})在 Promise 中一但出现了错误状态那么这个错误是不会消失的会一直向下传递直到遇到可以处理错误的函数。
由于 catch 是 then 的特例所以 catch 依旧返回的是一个 Promise 对象我们可以在 catch 后继续调用 then。
new Promise((resolve, reject) {reject(失败)
}).then(res {console.log(res)
}).catch(err {console.log(err) // 失败return 测试
}).then(res {console.log(res) // 测试
})一般总是建议Promise 对象后面要跟一个或多个 catch 方法这样可以处理 Promise 内部发生的错误
五、Promise.prototype.finally()
Promise.prototype.finally() 方法用于指定不管 Promise 对象最后状态如何都会执行的操作。该方法是 ES2018 引入标准的。
finally 方法的回调函数不接受任何参数这意味着没有办法知道前面的 Promise 状态到底是 fulfilled 还是 rejected 。这表明finally 方法里面的操作应该是与状态无关的不依赖于 Promise 的执行结果。
finally 本质上是 then 方法的特例。
// 不管 promise 最后的状态在执行完 then 或 catch 指定的回调函数以后都会执行 finally 方法指定的回调函数。
promise
.then(result {···})
.catch(error {···})
.finally(() {···})promise
.finally(() {// 语句
})// 等同于
promise
.then(result {// 语句return result},error {// 语句throw error}
)finally主要是用来处理一些必做操作比如在操作数据库之后无论成功与否都要关闭数据库连接。
server.listen(port).then(function () {// ...}).finally(server.stop)六、Promise.all()
Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。
Promise.all() 方法接受一个数组作为参数p1、p2、p3 都是 Promise 实例如果不是就会先调用 Promise.resolve 方法将参数转为 Promise 实例再进一步处理。另外Promise.all() 方法的参数可以不是数组但必须具有 Iterator 接口且返回的每个成员都是 Promise 实例。
const p Promise.all([p1, p2, p3])p 的状态由 p1、p2、p3 决定分成两种情况。
1只有 p1、p2、p3 的状态都变成 fulfilledp 的状态才会变成 fulfilled此时 p1、p2、p3 的返回值组成一个数组传递给 p 的回调函数。
2只要 p1、p2、p3 之中有一个被 rejectedp 的状态就变成 rejected此时第一个被 reject 的实例的返回值会传递给 p 的回调函数。
const p1 new Promise((resolve,reject){resolve(请求成功)
})
const p2 new Promise((resolve,reject){resolve(上传成功)
})
const p3 Promise.reject(error)Promise.all([p1, p2]).then(data {console.log(data) // data为一个数组 [请求成功, 上传成功]
}).catch(err {console.log(err)
})Promise.all([p1, p2, p3]).then(data {console.log(data)
}).catch(err {console.log(err) // 失败 打印结果为 error
})七、Promise.race()
Promise.race() 方法将多个 Promise 实例包装成一个新的 Promise 实例。
Promise.race() 方法的参数与 Promise.all() 方法一样如果不是 Promise 实例就会先调用 Promise.resolve() 方法将参数转为 Promise 实例再进一步处理。
const p Promise.race([p1, p2, p3])p 的状态由 p1、p2、p3 决定。
p1、p2、p3之中有一个实例率先改变状态p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值就传递给 p 的回调函数。
const p Promise.race([fetch(/resource-that-may-take-a-while),new Promise(function (resolve, reject) {setTimeout(() reject(new Error(request timeout)), 5000)})
])p
.then(console.log)
.catch(console.error)上面代码中如果 5 秒之内 fetch 方法无法返回结果变量 p 的状态就会变为 rejected从而触发 catch 方法指定的回调函数。
八、Promise.allSettled()
Promise.allSettled() 方法用来确定一组异步操作是否都结束了不管成功或失败。
Promise.allSettled() 方法接受一个数组作为参数数组的每个成员都是一个 Promise 对象并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更不管是 fulfilled 还是 rejected返回的 Promise 对象才会发生状态变更。
const promises [fetch(/api-1),fetch(/api-2),fetch(/api-3)
]await Promise.allSettled(promises)
removeLoadingIndicator()上面示例中数组 promises 包含了三个请求只有等到这三个请求都结束了不管请求成功还是失败removeLoadingIndicator() 才会执行。
该方法返回的新的 Promise 实例一旦发生状态变更状态总是 fulfilled不会变成 rejected。 状态变成 fulfilled 后它的回调函数会接收到一个数组作为参数该数组的每个成员对应前面数组的每个 Promise 对象。
const resolved Promise.resolve(42)
const rejected Promise.reject(-1)const allSettledPromise Promise.allSettled([resolved, rejected])allSettledPromise.then(function (results) {console.log(results)
})
// [
// { status: fulfilled, value: 42 },
// { status: rejected, reason: -1 }
// ]上面代码中Promise.allSettled() 的返回值 allSettledPromise状态只可能变成 fulfilled。它的回调函数接收到的参数是数组 results。该数组的每个成员都是一个对象对应传入 Promise.allSettled() 的数组里面的两个 Promise 对象。
results 的每个成员是一个对象对象的格式是固定的对应异步操作的结果。
// 异步操作成功时
{ status: fulfilled, value: value }// 异步操作失败时
{ status: rejected, reason: reason }成员对象的 status 属性的值只可能是字符串 fulfilled 或字符串 rejected用来区分异步操作是成功还是失败。如果是成功fulfilled对象会有 value 属性如果是失败rejected会有 reason 属性对应两种状态时前面异步操作的返回值。
下面是返回值的用法例子。
const promises [ fetch(index.html), fetch(https://does-not-exist/) ]
const results await Promise.allSettled(promises)// 过滤出成功的请求
const successfulPromises results.filter(p p.status fulfilled)// 过滤出失败的请求并输出原因
const errors results.filter(p p.status rejected).map(p p.reason)九、Promise.any()
ES2021 引入了 Promise.any() 方法。该方法接受一组 Promise 实例作为参数包装成一个新的 Promise 实例返回。
只要参数实例有一个变成 fulfilled 状态包装实例就会变成 fulfilled 状态如果所有参数实例都变成 rejected 状态包装实例就会变成 rejected 状态。
Promise.any([fetch(https://v8.dev/).then(() home),fetch(https://v8.dev/blog).then(() blog),fetch(https://v8.dev/docs).then(() docs)
]).then((first) { // 只要有一个 fetch() 请求成功console.log(first)
}).catch((error) { // 所有三个 fetch() 全部请求失败console.log(error)
})Promise.any() 跟 Promise.race() 方法很像只有一点不同就是 Promise.any() 不会因为某个 Promise 变成rejected 状态而结束必须等到所有参数 Promise 变成 rejected 状态才会结束。 下面是 Promise() 与 await 命令结合使用的例子。
const promises [fetch(/endpoint-a).then(() a),fetch(/endpoint-b).then(() b),fetch(/endpoint-c).then(() c),
]try {const success await Promise.any(promises)console.log(success)
} catch (error) {console.log(error)
}上面代码中Promise.any() 方法的参数数组包含三个 Promise 操作。其中只要有一个变成 fulfilledPromise.any() 返回的 Promise 对象就变成 fulfilled。如果所有三个操作都变成 rejected那么 await 命令就会抛出错误。
Promise.any() 抛出的错误是一个 AggregateError 实例这个 AggregateError 实例对象的 errors 属性是一个数组包含了所有成员的错误。
下面是一个例子。
var resolved Promise.resolve(42)
var rejected Promise.reject(-1)
var alsoRejected Promise.reject(Infinity)Promise.any([resolved, rejected, alsoRejected]).then(function (result) {console.log(result); // 42
})Promise.any([rejected, alsoRejected]).catch(function (results) {console.log(results instanceof AggregateError) // trueconsole.log(results.errors) // [-1, Infinity]
})十、Promise.resolve()
Promise.resolve() 方法用于将现有对象转为 Promise 对象。
Promise.resolve(foo)
// 等价于
new Promise(resolve resolve(foo))Promise.resolve() 方法的参数
1参数为一般参数
如果参数是一个原始值或者是一个不具有 then() 方法的对象则 Promise.resolve() 方法返回一个新的 Promise 对象状态为 resolved。
const p Promise.resolve(Hello)p.then(function (s) {console.log(s)
})
// Hello2参数是一个 Promise 实例
如果参数是 Promise 实例那么 Promise.resolve 将不做任何修改、原封不动地返回这个实例。
3不带有任何参数
Promise.resolve() 方法允许调用时不带参数直接返回一个 resolved 状态的 Promise 对象。
所以如果希望得到一个 Promise 对象比较方便的方法就是直接调用 Promise.resolve() 方法。
const p Promise.resolve()p.then(function () {// ...
})4参数是一个 thenable 对象了解即可
当接收一个含 then 方法的对象时Promise.resolve() 会直接调用 then 方法。 thenable 对象指的是具有 then 方法的对象。 const thenable {then() {console.log(then)}
}
Promise.resolve(thenable).then(res console.log(res res),err console.log(err err)
)console.log(Promise.resolve(thenable))
// Promise { pending }
// then// 为什么不会执行 then 中的两个回调函数呢
// 可见当接收一个含 then 方法的对象时默认返回一个 Promise 并且是等待状态的没有状态的变化那么就不可能会执行 then 的回调函数// 如果我们要改变这个返回的 Promise 对象的状态并让 then 的回调对应处理的话ES6 规定了以下写法
const thenable02 {then(resolve, reject) {console.log(then)resolve(then)}
}
Promise.resolve(thenable02).then(res console.log(res res),err console.log(err err)
)
// then
// res then十一、Promise.reject()
Promise.reject(reason) 方法也会返回一个新的 Promise 实例该实例的状态为 rejected。
const p Promise.reject(出错了)
// 等同于
const p new Promise((resolve, reject) reject(出错了))p.then(null, function (s) {console.log(s)
})
// 出错了上面代码生成一个 Promise 对象的实例 p状态为 rejected回调函数会立即执行。
Promise.reject() 方法的参数会原封不动地作为 reject 的理由变成后续方法的参数。
Promise.reject(出错了)
.catch(e {console.log(e 出错了)
})
// true十二、Promise.try()
实际开发中经常遇到一种情况不知道或者不想区分函数 f 是同步函数还是异步操作但是想用 Promise 来处理它。因为这样就可以不管 f 是否包含异步操作都用 then 方法指定下一步流程用 catch 方法处理 f 抛出的错误。一般就会采用下面的写法。
Promise.resolve().then(f)上面的写法有一个缺点就是如果 f 是同步函数那么它会在本轮事件循环的末尾执行。
// 函数 f 是同步的但是用 Promise 包装了以后就变成异步执行了。
const f () console.log(now)
Promise.resolve().then(f)
console.log(next)
// next
// nowPromise.try 方法让同步函数同步执行异步函数异步执行并且让它们具有统一的 API 。
const f () console.log(now)
Promise.try(f)
console.log(next)
// now
// nextdatabase.users.get() 返回一个 Promise 对象如果抛出异步错误可以用 catch 方法捕获。但是 database.users.get() 可能还会抛出同步错误比如数据库连接错误具体要看实现方法这时你就不得不用 try…catch 去捕获。
事实上Promise.try 就是模拟 try 代码块就像 promise.catch 模拟的是 catch 代码块。
// 统一用 promise.catch() 捕获所有同步和异步的错误。
Promise.try(() database.users.get({id: userId})).then(...).catch(...)// ----------------------
// 等同于try {database.users.get({id: userId}).then(...).catch(...)
} catch (e) {// ...
}十三、Promise 的应用
异步加载也称为图片的预加载。利用 js 代码提前加载图片用户需要时可以直接从本地缓存获取但是会增加服务器前端的压力。这样做可以提高用户的体验因为同步加载大图片的时候图片会一层一层的显示处理但是经过预加载后直接显示出整张图片。 !DOCTYPE html
html langen
headmeta charsetUTF-8/titlePromise 的应用/titlestyle#img {width: 24%;padding: 24px;}/style
/head
body
!-- 一般加载图片方式 --
!-- img srchttps://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg / --
img src alt idimgscript// 异步加载图片函数参数图片路径const loadImgAsync url {return new Promise((resolve, reject) {const img new Image() // 创建一个图片对象img.onload () { // 图片成功加载触发事件resolve(img)}img.onerror () { // 图片加载失败触发事件reject(new Error(Could not load image at ${url}))}// 这个放在 onload 与 onerror 之后// 一但给 img.src 赋值那么便立马开始发送请求加载图片在后台加载页面上不会显示// 注意这里的 src 是 img 对象的属性与 html 中 img 的 src 无关img.src url})}const imgDOM document.getElementById(img)loadImgAsync(https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg).then(img {// 如果加载成功那么把后台缓存的图片显示到页面上imgDOM.src img.src}).catch(err {console.log(err)})
/script
/body
/html
