promise

1、基础案例

var promise = new Promise((resolve, reject) => {
  if(异步请求成功){
    resolve()
  }else{
    reject()
  }
})
 
promise.then(()=>{
  //success
},()=>{
  //failure
})

Promise使用时传参

var promise = new Promise((resolve, reject) => {
  if (异步请求成功) {
    resolve("success")
  } else {
    reject("error")
  }
})
 
promise.then( res => {
    res // success
})
//捕获异常可用catch()方法
promise.catch( err => {
    err // error
})

比如请求图片

const loadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image from ${url}`));
    };
    img.src = url;
  });
};
 
loadImage('https://example.com/image.jpg')
  .then((img) => {
    console.log('Image loaded successfully');
    document.body.appendChild(img);
  })
  .catch((error) => {
    console.error(error.message);
  });

2、链式调用

new Promise((resolve) => {
  resolve(1)
}).then((res) => {
  return new Promise((resolve) => {
    resolve(res+2)
  })
}).then((res) => {
  return new Promise((resolve) => {
    resolve(res+3)
  })
}).then((res) => {
  return res // 6
})

3、Promise.all

const urls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg'
];
 
const loadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image from ${url}`));
    };
    img.src = url;
  });
};
 
Promise.all(urls.map(loadImage))
  .then((images) => {
    console.log('All images loaded successfully');
    images.forEach((img) => {
      document.body.appendChild(img);
    });
  })
  .catch((error) => {
    console.error(error.message);
  });

4、Promise.race()

Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回哪个结果，不管结果本身是成功状态还是失败状态。

var p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("res1")
  }, 3000)
})
var p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("err2")
  }, 2000)
})
Promise.race([p1, p2])
.then((res)=>{
  console.log(res);
}).catch((err)=>{
  console.log(err); //err2
})