Closed2021/01/22にクローズ9

Axiosとfetchの比較

Next.jsでhttp clientの実装どうするか決めたい

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

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

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

timeoutの設定はaxiosのが簡単だよ

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

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

基本構文

// 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);
  });

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

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

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