Zenn
Closed9

Axiosとfetchの比較

JavaScript
axios
nus3nus3

これ読む
https://blog.logrocket.com/axios-or-fetch-api/

nus3nus3

axiosの場合、dataはオブジェクトでいい
fetch()の場合、data(body)はstring

nus3nus3

axiosはie11とかでも動くよ
fetch()はie11では動かないよ

ただfetchを使ってたとしてもpolyfillできるよ

nus3nus3

axiosはresponseをオブジェクトとして返してくれるけど
fetchはstringをparseしないといけないよ

nus3nus3

interceptorsがaxiosでは提供されてるよ
fetchもオーバーライドしたらできるよ

nus3nus3

基本構文

// axios

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};

axios(options)
  .then(response => {
    console.log(response.status);
  });

// fetch()

const url = 'http://localhost/test.htm';
const options = {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({
    a: 10,
    b: 20
  })
};

fetch(url, options)
  .then(response => {
    console.log(response.status);
  });
nus3nus3

dataがオブジェクト返してくれるし
interceptorまわりも実装簡単そうだし
axiosでいいかなー

サンプル実装はopenapiのgenerate周りと合わせてやる

このスクラップは2021/01/22にクローズされました