axiosとは何か？Vue.jsでAPIのデータを取得する方法｜取得したデータの中身や処理の指定方法（変数名の変更, then, catch, finally）

#npmの場合
npm install axios

#yarnの場合
yarn add axios

#yarn add axios

yarn add v1.22.5
[1/4] Resolving packages...
  ・
  ・
  ・
info All dependencies
└─ axios@0.21.1
Done in 177.29s.

<script src="https://unpkg.com/axios/dist/axios.min.js"><script>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      変数名: 初期値
    }
  },
  mounted(){
    axios
      .get('URL')
      .then(response => (this.変数名 = response))
  }
}
</script>

import インポート名 from モジュール

  data(){
    return{
      変数名: 初期値
    }
  },

    axios
      .メソッド('HTTPアクセスするパス')
      .then( (変数名) => { 処理 })

{
  method: 'メソッド名',
  url: 'URL',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
};

axios.request{
  method: 'メソッド名',
  url: 'URL',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
};

axios.get('URL', {
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

  mounted(){
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }

{
    "data": {
        "time": {
            "updated": "Aug 4, 2021 10:33:00 UTC",
            "updatedISO": "2021-08-04T10:33:00+00:00",
            "updateduk": "Aug 4, 2021 at 11:33 BST"
        },
        "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org",
        "chartName": "Bitcoin",
        "bpi": {
            "USD": {
                "code": "USD",
                "symbol": "$",
                "rate": "37,941.7217",
                "description": "United States Dollar",
                "rate_float": 37941.7217
            },
            "GBP": {
                "code": "GBP",
                "symbol": "£",
                "rate": "27,224.4753",
                "description": "British Pound Sterling",
                "rate_float": 27224.4753
            },
            "EUR": {
                "code": "EUR",
                "symbol": "€",
                "rate": "31,993.5600",
                "description": "Euro",
                "rate_float": 31993.56
            }
        }
    },
    "status": 200,
    "statusText": "",
    "headers": {
        "cache-control": "max-age=15",
        "content-length": "675",
        "content-type": "application/javascript",
        "expires": "Wed, 04 Aug 2021 10:34:07 UTC"
    },
    "config": {
        "url": "https://api.coindesk.com/v1/bpi/currentprice.json",
        "method": "get",
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1
    },
    "request": {}
}

  mounted(){
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }

  mounted(){
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response.data))
  }

    axios
      .メソッド('HTTPアクセスするパス')
      .then( (変数名) => { 処理 } )
      .catch( (変数名) => { 処理 } )
      .finally( (変数名) => { 処理 } )

  mounted(){
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then( response =>  this.info = response )
      .catch( e => this.error = e )
      .finally( msg => this.message = {title: "finallyを実行しました", message: msg} )
  }

  mounted(){
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then( response =>  this.info = response )
      .catch( e => this.error = e )
      .finally( msg => this.message = {title: "finallyを実行しました", message: msg} )
  }

<template>
  <div id="app">
     <h2>info</h2>
     {{ info }}

     <h2>error</h2>
     {{ error }}

     <h2>message</h2>
     {{ message }}
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    return{
      info: [],
      error: [],
      message: [],
    }
  },
  mounted(){
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.error')
      .then( response =>  this.info = response )
      .catch( e => this.error = e )
      .finally( msg => this.message = {title: "finallyを実行しました", message: msg} )
  }
}
</script>

<style scoped>

</style>

<template>
  <div id="app">
     <h2>info</h2>
     {{ info }}

     <h2>error</h2>
     {{ error }}

     <h2>message</h2>
     {{ message }}
  </div>
</template>

import インポート名 from モジュール

  data(){
    return{
      info: [],
      error: [],
      message: [],
    }
  },

  const app = new Vue({
    vuetify, //追加
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then( response =>  this.info = response )
      .catch( e => this.error = e )
      .finally( msg => this.message = {title: "finallyを実行しました", message: msg} )