Fetch vs. Axios

fetch API

• CDN參考資訊

• Promise 回傳：使用then進一步處理，使用catch處理錯誤。

• 回傳物件：ReadableStream，是Response.body()的實體。

• 回傳資料類型處理方法各異：

  • Response.body().arrayBuffer()
  • Response.body().blob()
  • Response.body().formData()
  • Response.body().json()
  • Response.body().text()

• 要自行判定回傳代碼。

• 在404時，不會顯示error，所已要真對response.ok 是否為true做檢查。（參考CDN）

GET（預設）

fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function (jsonData) {
    console.log(jsonData);
  });

POST / PUT

• body若是要傳資料（非formdata），要記得先轉成字串（JSON.stringify）。

fetch(url, {
  method: "POST", // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    "Content-Type": "application/json",
  }),
})
  .then((res) => res.json())
  .catch((error) => console.error("Error:", error))
  .then((response) => console.log("Success:", response));

axios

• npm參考
• 非原生，要另外安裝。
• Promise 回傳，前後端皆可用。
• 可使用async-await或then-catch。

GET

• then-catch

axios
  .get(url, {
    // 有需要的時候才放parameters物件。
    params: {
      key: value,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed - 非必須。
  });

• async-await

async function getUser() {
  try {
    const response = await axios.get(url);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

POST

axios
  .post("url", {
    key: value,
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

執行多個POST

function getUserAccount() {
  return axios.get(url);
}

function getUserPermissions() {
  return axios.get(url);
}

Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {
  const acct = results[0];
  const perm = results[1];
});

使用method的寫法

• GET

axios({
  method: "get",
  url: url,
  responseType: "stream",
}).then(function (response) {
  response.data.pipe(fs.createWriteStream("image.jpg"));
});

• POST

axios({
  method: "post",
  url: url,
  data: {
    key: value,
  },
});