fetch と axios の比較

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

アクシオス

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

結論