axios的使用

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

yarn add axios

在vue组件中使用axios

<template>
  <div>
    <div v-if="isLoading">
      <img src="../assets/loading.gif">
    </div>
    <div>
      <ul>
        <li v-for="post in posts" :key="post.id">
          <span>{{post.id}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
export default {
    data(){
      return {
        isLoading: false,
        posts:[]
      }
    },
    methods: {
      // GET请求
      getData(){
        this.$http.get('https://cnodejs.org/api/v1/topics', {
          params:{
            limit: 20,
            page: 1
          }
        })
        .then((res)=>{
          this.isLoading = false
          this.posts = res.data.data
        })
        .catch((err)=>{
          console.log(err)
        })
      }
    },
  beforeMount(){
      this.isLoading = true
      this.getData()
  }
}
</script>