山东大学移动信息门户10

2021SC@SDUSC

用Promise优雅地处理异步

• Promise：一个表示op中间状态的对象；

以订披萨类比Promise和callback：

chooseToppings(function(toppings) {
  placeOrder(toppings, function(order) {
    collectOrder(order, function(pizza) {
      eatPizza(pizza);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);
chooseToppings()
.then(toppings => placeOrder(toppings))
.then(order => collectOrder(order))
.then(pizza => eatPizza(pizza))
.catch(failureCallback);

1. When a promise is created, it is neither in a success or failure state. It is said to be pending.

2. When a promise returns, it is said to be resolved

   1. A successfully resolved promise is said to be fulfilled. It returns a value, which can be accessed by chaining a .then() block onto the end of the promise chain. The callback function inside the .then() block will contain the promise's return value.

   2. An unsuccessful resolved promise is said to be rejected. It returns a reason, an error message stating why the promise was rejected. This reason can be accessed by chaining a .catch() block onto the end of the promise chain.

---

使用async进阶处理异步

async fn是一种知道如何期望使用await关键字来调用异步代码的函数。

• 异步函数的返回值是promise对象

• await只在异步函数中有效

chooseToppings(function(toppings) {
  placeOrder(toppings, function(order) {
    collectOrder(order, function(pizza) {
      eatPizza(pizza);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);
chooseToppings()
.then(toppings => placeOrder(toppings))
.then(order => collectOrder(order))
.then(pizza => eatPizza(pizza))
.catch(failureCallback);

// Promise-Style
fetch('coffee.jpg')
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.blob();
})
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});

// Async/await-Style
//1. .catch()
async function myFetch() {
  let response = await fetch('coffee.jpg');
​
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
​
  let myBlob = await response.blob();
​
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
  }
}
​
myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});
​
//2.try{}catch(e){}
async function myFetch() {
  try {
    let response = await fetch('coffee.jpg');
​
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let myBlob = await response.blob();
    let objectURL = URL.createObjectURL(myBlob);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);
​
  } catch(e) {
    console.log(e);
  }
}
​
myFetch();

//Mixed-Style
async function myFetch() {
  let response = await fetch('coffee.jpg');
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.blob();
​
}
​
myFetch().then((blob) => {
  let objectURL = URL.createObjectURL(blob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}).catch(e => console.log(e));