コンポーネントでAxiosまたはHTTPコールを使用するのが不適切な理由は何故ですか？

Question

In this article、それは言う：

それは一般的に貧しい人々の練習ですが、あなたは方法、ライフサイクルフック、またはたびからデータをフェッチするために、あなたのコンポーネントに直接Axiosを使用することができます。

私はなぜだろうか？私は通常ライフサイクルのフックを使ってデータを取得します（特にcreated()から）。私たちはどこに要求の呼び出しを書く必要がありますか？

Answer 1

APIメソッドをコンポーネントに直接書き込むとコード行が増え、読みにくくなります。私の知る限りauthorがServiceにAPI方法を分離するために示唆されたと考えているよう 。

top postsを取得してデータを操作する必要がある場合を考えてみましょう。あなたがコンポーネントで、それが再利用されていないことを行う場合は、あなたがそれを使用したい、これまで他のコンポーネントで、それを複製する必要があります。

export default { 
    data:() => ({ 
    top: [], 
    errors: [] 
    }), 

    // Fetches posts when the component is created. 
    created() { 
    axios.get(`http://jsonplaceholder.typicode.com/posts/top`) 
    .then(response => { 
     // flattening the response 
     this.top = response.data.map(item => { 
     title: item.title, 
     timestamp: item.timestamp, 
     author: item.author 
     }) 
    }) 
    .catch(e => { 
     this.errors.push(e) 
    }) 

    } 
} 

だから、あなたはコードを複製する必要が別のコンポーネントにtop postをフェッチする必要がある場合。

ここでAPI methodsをServiceに入れてみましょう。

api.js file 

const fetchTopPosts = function() { 
    return axios.get(`http://jsonplaceholder.typicode.com/posts/top`) 
     .then(response => { 
      // flattening the response 
      this.top = response.data.map(item => { 
      title: item.title, 
      timestamp: item.timestamp, 
      author: item.author 
      }) 
     }) // you can also make a chain. 
} 

export default { 
    fetchTopPosts: fetchTopPosts 
} 

したがって、上記のAPI methodsを任意のコンポーネントで使用します。この後

：

import API from 'path_to_api.js_file' 
export default { 
     data:() => ({ 
     top: [], 
     errors: [] 
     }), 

     // Fetches posts when the component is created. 
     created() { 
     API.fetchTopPosts().then(top => { 
      this.top = top 
     }) 
     .catch(e => { 
      this.errors.push(e) 
     }) 

     } 
    } 

Answer 2

小規模なアプリケーションやウィジェットでは問題ありませんが、実際のSPAではAPIをモジュールから除外し、vuexを使用する場合はアクションを使用してapiモジュールを呼び出してください。

あなたのコンポーネントはそのデータが来ているところから方法とでconcerneredすべきではありません。コンポーネントは、AJAXではなくUIを担当します。

上記の例では

import api from './api.js' 

created() { 
    api.getUsers().then(users => { 
    this.users = data 
    }) 
} 

// vs. 

created() { 
    axios.get('/users').then({ data }=> { 
    this.users = data 
    }) 
} 

、あなたの「axiosフリー」のコードは実際にはるかに短いではありませんが、あなたが潜在的にコンポーネントの外に保つことができるものの画像：HTTPエラーを処理

• 、例えばリトライ
• サーバからプリフォーマットデータには、例えば転記FormData作成コンポーネント
• ヘッダ構成（コンテンツ・タイプ、アクセストークン...）
• に合うよう画像ファイル

リストが長くなることがあります。そのすべてはビューに関係しないためコンポーネントに属しません。ビューには結果のデータまたはエラーメッセージのみが必要です。

これは、コンポーネントとAPIを個別にテストできるということも意味します。