【MAC 上学习 Vue】Day 12. 项目中引入 Axios

安装 Axios

1. 在终端输入以下命令：

cnpm install axios --save

cnpm install axios --save-dev

2. 在 src 文件夹下的 main.js 文件，引入 Axios：

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

Axios API

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

Axios 应用

<template>
  <div class="hello">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    // 调用后台接口获得数据
    this.$axios
      .get(
        "../../static/health.json"
      )
      .then(res => {
        // then()中如果只传入一个处理函数，那么默认是处理请求成功的情况
        this.msg = res.data;
      })
      .catch(err => {
        // 未获得成功之后的报错信息
        console.log(err);
      });
  }
}
</script>

参考：https://www.npmjs.com/package/axios