Promise demo

生成promise实例

// 生成promise实例
const promise = new Promise((resolve, reject) => {
  const success = true;
  setTimeout(() => {
    if (success) {
      resolve('success')
    } else {
      reject('err')
    }
  }, 2000)
})

// 方式1:then接收两个函数：第一个resolve，第二个reject
promise.then((value) => {
  console.log(111)
  console.log(value)
}, (err) => {
  console.log(111)
  console.log(err)
})

// 方式2：then方法接收成功resolve结果，catch捕获reject错误
promise.then(value => {
  console.log('222')
  console.log(value)
}).catch(err => {
  console.log(222)
  console.log(err)
})

promise实现异步加载图片

// promise实现异步加载图片
const loadImageAsync = (url) => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => {
      resolve(image);
    }
    image.onerror = () => {
      reject(new Error('Could not load image at ' + url))
    }
    image.src = url;
  })
}
// 调用
loadImageAsync(
  'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f30791b1ed34016b91eb5734384abb7~tplv-k3u1fbpfcp-zoom-crop-mark:1434:1434:1434:807.awebp'
).then(value => {
  console.log(value)
}).catch(err => {
  console.log(err)
})

基于promise XHRHttpRequest请求

// 基于promise XHRHttpRequest请求
const getJSON = (url) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText)
        } else {
          reject(new Error('Error: ' + xhr.status))
        }
      }
    }
    xhr.open('GET', url, true);
    xhr.send();
  })
}

getJSON(
  'http://127.0.0.1:4523/mock/583238/mall/api?type=1'
).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

sleep

// sleep
const sleep = (time) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('1234')
    }, time)
  })
}
sleep(2000).then(res => {
  console.log(res)
})