axios

axios

axios可以局部导入和全局导入

首先要下载axios插件

全局导入

当把axios挂载到mainjs中，就是全局了，在其他的组件中就不需要再导入了

①main.js

导入axios

import axios from 'axios'

全局配置 axios 的请求根路径

axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

挂载

Vue.prototype.$http = axios
// 同效力于 Vue.prototype.axios = axios
// 只是把axios改成$http

这样过后，在其他组件中使用的方法：

// 今后，在每个 .vue 组件中要发起请求，直接调用 this.$http.xxx
// 但是，把 axios 挂载到 Vue 原型上，有一个缺点：不利于 API 接口的复用！！！
// 每一次都要重新调用一次接口

②App.vue

template

<button @click="btnPromise">获取图书列表的数据[Promise]</button>
<button @click="btnGetBooks">获取图书列表的数据[data]</button>
<button @click="getInfo">发起 GET 请求</button>
<button @click="postInfo">发起 POST 请求</button>

script

【已弃用】这样会得到一个promise对象，而promise下的data才是我们需要的数据，这样获取数据太过于麻烦。

methods: {
    btnPromise() {
      console.log(this.$http.get('/api/getbooks')) 
    },
  },

【最佳方案】直接获取Promise下的data内容

methods: {
	//使用GET得到图书列表的数据
    async btnGetBooks() {
      const { data: res } = await this.$http.使用GET('/api/getbooks')
      console.log(res)
    },
    // GET，测试GET请求，
    async getInfo() {
      const { data: res } = await this.$http.get('/api/get')
      console.log(res)
    },
    // POST，测试POST请求，
    async postInfo() {
      const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
      console.log(res)
    }  
  }