xiaoc的博客

Promise

# Promise

# 基础用法

function loadScript(src){
  return new Promise((resolve,reject)=>{
    // 异步操作
    const script = document.createElement('script')
    script.src = src
    script.onload = ()=>{
      resolve(src)
    }
    script.onerror = (err)=>{
      reject(err)
    }
    document.body.append(script)
  })
}

// promise 返回的是 promise 对象
loadScript('./1.js')
  .then(()=>{
    loadScript('./2.js')
    // return loadScript('./xxx.js') // 设置 return 能够在报错时停止执行后面的 then 而进入 catch 状态
  })
  .then(loadScript('./3.js'))
  .catch(err=>{
    console.log(err)
  })

# 静态方法

Promise.resolve(1) // 将静态值 转成 promise对象 执行 then
Promise.reject(1) // 将静态值 转成 promise对象 执行 catch

# 错误捕获

loadScript('./1.js')
  .then(()=>{
    return loadScript('./2.js') // 设置 return 能够在报错时停止执行后面的 then 而进入 catch 状态
  })
  .then(()=>{
    return loadScript('./3.js')
  })
  .catch(err =>{
    console.log(err) // 只要有 reject 抛出异常 都将进入 catch 并停止向下执行
  })

# 异步并发

const p1 = Promise.resolve(1)
const p3 = Promise.resolve(2)
const p3 = Promise.resolve(3)

// Promise.all() 将所以异步数据的结果放在一个数组中
Promise.all([p1,p2,p3]).then(res=>{
  console.log(res) // [1,2,3]
})

# 异步竞速

Promise.race() 将多个异步操作中最先获取到的数据作为最终值 （先到先得）

const p1 = () => {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(1)
    },2000)
  })
}

const p2 = () => {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(12)
    },3000)
  })
}
Promise.race([p1(),p2()]).then(res=>{
  console.log(res) // 1 取先获取到的数据
})

Proxy