[30天 Vue学好学满 DAY25] axios API

vue.js2.0後版本推荐使用axios来完成ajax请求
为Promise-based HTTP client
非同步，可於then後进行操作、catch错误处理，有finlly机制(同步)。

安装

// npm
$ npm install axios

// yarn
$ yarn add axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入於main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

GET & POST

GET

依照官方案例呼叫於mounted。

mounted() {
  this.$axios
    .get("https://api.coindesk.com/v1/bpi/currentprice.json")
      // 成功
      .then((response) => console.log(response))
      // 错误处理
      .catch((error) => console.log(error))
      // 必执行，类似finally
      .then(console.log('must run'))
},

检视log

回传为JSON格式，可透过.取数据，也可进行遍历、过滤...等操作。
以下范例调整为function形式(进行多处理)

.then(function (response) {
  console.log(response.data.bpi);
  console.log(response.data.bpi.USD);
})

检视log

Get with params

.get("https://my.api.url", {
  params: {
    id: '0001',
  },
})

POST

基础用法与GET相同。

this.$axios
    .post("https://my.api.url")
      // 成功
      .then((response) => console.log(response))
      // 错误处理
      .catch((error) => console.log(error))
      // 必执行，类似finally
      .then(console.log('must run'))

Post with request body

// 直接进行宣告
.post("https://my.api.url", {
  id: "0001",
  name: "su",
})

// 透过变数
.post("https://my.api.url", this.todo)

多并发请求

透过all、spread实现

定义方法

methods: {
  doGetOne: function () {
    return this.$axios.get(
      "https://api.coindesk.com/v1/bpi/currentprice.json"
    );
  },
  doGetTwo: function () {
    return this.$axios.get(
      "https://api.coindesk.com/v1/bpi/currentprice.json"
    );
  },
}

mounted

mounted() {
  this.$axios.all([this.doGetOne(), this.doGetTwo()]).then(
    this.$axios.spread(function (acct, perms) {
      // API皆执行完成
      console.table(acct);
      console.table(perms.data);
    })
  );
},