vue+axios安装

Posted 2021-03-13 索菲娅丽安娜

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

安装方式：

1.使用cdn

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

2.使用npm安装

npm/cnpm install axios

在main.js中import axios并将其挂载到Vue实例上

import Axios from ‘axios‘
Vue.prototype.$axios = Axios //调用时使用this. $axios()

3.点击随机切换笑话的小例子

<template>
  <div id="app">
    <input type="button" name id value="获取笑话" @click="getJoke" />
    <p>{{joke}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => {
    return {
      joke: "很好笑的笑话"
    };
  },
  methods: {
    getJoke: function() {
      // axios回调函数中的this已经改变，无法访问到data中数据
      // 可以var that = this； 回调函数中用that访问data中数据
      var that=this;
      this.$axios({
        url: "https://autumnfish.cn/api/joke",
        methods: "get"
      }).then(
        function(response) {
          console.log(response.data);
          that.joke=response.data
        },
        function(err) {}
      );
    }
  },
  created: function() {}
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

ul,
li {
  list-style: none;
}
</style>