はじめに

axios のレスポンスは多くのプロパティを持つオブジェクトを返しますが、全てを使うわけではない(例: config や headers が不要なケース）
実際に使うのは、data や status などの一部のプロパティだけの場合が多い
不要な部分を省いてコードを簡潔にし、読みやすくしたい

そこで、JavaScriptの分割代入（Destructuring Assignment）を使って不要な部分を省き、コードをシンプルに保つ方法を備忘録としてまとめました。

分割代入を使う理由

コードの簡潔化: 必要な部分だけにフォーカスできる。
可読性の向上: 他の開発者がコードを見たとき、どのプロパティを使用しているかすぐに理解できる。
リネーム: プロパティの名前を変更して取り扱いやすくする。

実践例: 分割代入で必要なプロパティを抽出

1.こんな`response`が帰ってきていたとする:

qiita.rb


const response = {
  config: {
      adapter: (3) ['xhr', 'http', 'fetch'] 
      data: undefined
      env: {FormData: ƒ, Blob: ƒ}
  },
  data: ['Task 1', 'Task 2', 'Task 3'],                
  headers: { contentType: 'application/json' },
  request: XMLHttpRequest {
      status: 200,
      statusText: "OK"
  }
};

2.分割代入で必要なプロパティを抽出

qiita.rb

const { data, status } = response;

console.log(data);   // ['Task 1', 'Task 2', 'Task 3']
console.log(status); // 200

3. プロパティの名前を変更して取り出す

分割代入を使って、プロパティ名を変更することも可能です。

qiita.rb

const { data: tasks, status: httpStatus } = response;

console.log(tasks);      // ['Task 1', 'Task 2', 'Task 3']
console.log(httpStatus); // 200

参考