fetch と axios の比較

この2つの方法を比較した時のメモです.

1.GET

フェッチ

    fetch(url)
    .then((res) => {
       if (!res.ok) {
       // need error handling here
         throw Error();
        }
       // need conversion
       return res.json();
        })
    .then((data) => {
     // use this data
    })
    .catch((error) => // error handling )
    .finally(() => // this is optional);

アクシオス

GET メソッドを使用する場合は .get を省略できます

    axios.get(url)
    .then((response) => {
      const data = response.data;
      // use this data directly
    })
    .catch((error) => // error handling)
    .finally(() => // this is optional);

2.投稿

フェッチ

    fetch(url,
      {
        method: "POST",
        // you can omit headers nowadays
        headers: {
           "Content-Type": "application/json",
        },
        // need conversion
        body: JSON.stringify(
         {
          tag: data.tag,
          imageUrl: url,
         })
      })
    .then((res) => { 
     // need error handling here
      if (!res.ok) {
        throw Error();
        }
      })
    .catch((error) => { // error handling });

アクシオス

    axios.post(url,
    {
    // you can put an object directly
     tag: data.tag,
     imageUrl: url,
    })
    .then((res) => { // success operations})
    .catch((error) => { // error handling });

3. 削除

フェッチ

    fetch(url,
      {
        method: "DELETE",
      })
    .then((res) => {
      // need error handling here
      if (!res.ok) {
         throw Error();
       }     
       // success operation
     })
    .catch((error) => { // error handling })

アクシオス

    axios.delete(url)
    .then((*res*) => {
     // success operation
     })
    .catch((error) => setError("Delete failed"))
    .finally(() => setLoading(false));

結論

インストールとインポートの面倒なプロセスを実行する必要があるにもかかわらず、多くの開発者が axios を使用することを好む理由がようやくわかりました. axios が fetch よりもはるかに単純であることは明らかであり、エラーをスローすることを忘れるため、無意識のバグを回避できます.したがって、これからは axios を使用します.

読んでくれてありがとう.
コメントやアドバイスやフィードバックをいただければ幸いです:)

元の記事は here です