Mandy's Web

文章導覽

  • Promise

  • async/await

  • RxJS


Async/Await vs RxJS 非同步取值筆記

Promise

在使用 async/await 一定要先了解 Promise

Promise 是 es6 之後才開始有的

Promise 程式碼

const promise = new Promise((resolve, reject) => {
  resolve(value); // 完成
  reject("fail"); // 拒絕
});

將 promise 封裝後包成 function

const fetchData = (url, data) => {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((res) => {
        resolve(res.json());
      })
      .catch((e) => {
        reject(e);
      });
  });
};

async/await

// 排隊執行
const getData = async () => {
  try {
    const jewelery = await fetchData(
      "https://fakestoreapi.com/products/category/jewelery"
    );
    const electronics = await fetchData(
      "https://fakestoreapi.com/products/category/electronics"
    );
    return {
      electronics,
      jewelery,
    };
  } catch (e) {
    console.log("catch", e);
    throw new Error(e);
  }
};

使用 promise 可轉成 then 的串接

getData().then((res) => {
  console.log("done", res);
});

async/await 範例


RxJS

import { ajax } from "rxjs/ajax";
import { of, map, catchError, combineLatest } from "rxjs";

const fetchJewelery$ = ajax(
  "https://fakestoreapi.com/products/category/jewelery"
).pipe(
  map((res) => {
    return res.response;
  }),
  catchError((error) => {
    console.log("error: ", error);
    return of(error);
  })
);

const fetchElectronics$ = ajax(
  "https://fakestoreapi.com/products/category/electronics"
).pipe(
  map((res) => {
    return res.response;
  }),
  catchError((error) => {
    console.log("error: ", error);
    return of(error);
  })
);

combineLatest([fetchJewelery$, fetchElectronics$]).subscribe(
  ([jewelery, electronics]) => {
    console.log("data", electronics, jewelery);
  }
);

RxJS 範例


參考連結: async await 你真的用對了嗎? Web 開發學習筆記 15 — 呼叫堆疊、同步與非同步、Promise、Async/Await、Conditional ternary operator


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular