js异步编程

异步编程 asynchronous

基本概念

阻塞与非阻塞

阻塞：上一个操作正在处理，程序在等待过程中，无法进行别的操作

非阻塞：上一个操作正在处理，程序在等待过程中，可以进行别的操作

同步与异步

同步：上一步操作正在处理，程序不知道上一步操作状态（是否完成），程序需要主动去询问状态

异步：上一步操作正在处理，当上一步操作完成后，程序会被通知状态完成

差别与联系

阻塞非阻塞：上一步操作处理中（等待过程中），是否可以进行其他操作

同步异步：上一步操作结果（完成状态），是否主动通知

Javascript是单线程的，所以对于一些大数据量的同步操作，可能会阻塞线程，同步≈阻塞

承诺 Promise

promise： 异步操作的最终完成（或失败）及其结果值

const failTime = Number.parseInt(input.value)
const promise = new Promise(function(resolve, reject) {
    pElem.textContent = '加载中...';
    document.body.appendChild(pElem);
    setTimeout(() => {
        resolve('加载成功！')
    }, 4 * 1000)
    setTimeout(() => {
        reject('加载失败！')
    }, failTime * 1000)
})

promise.then(data => {
    pElem.textContent = data;
    console.log(promise) // Promise {<resolved>: "加载完成"}
})
    .catch(e => {
    pElem.textContent = e;
    console.log(promise) // Promise {<rejected>: "加载失败"}
})
    .finally(()=>{
    pElem2.textContent = '完成加载，开始处理。'
    document.body.appendChild(pElem2)
})

console.log(promise) // Promise {<pending>}

---

• 引用
  • MDN|异步
  • MDN|一般异步概念
  • MDN|标准内置对象 promise
  • 知乎|Maples7|完全理解同步/异步与阻塞/非阻塞

---

• 创建时间：20210812-4 09:39
• 更新时间：20210831-2 23:26
• 版权作者：贝可考拉
• 当前版本：v1.0
• 标签分类： #编程开发 #javascript #js #异步