axios-一个基于Promise的http库 可用在浏览器和node.js中

引入axios

1、yarn add axios

在main.js

2、全局引入axios

import axios from 'axios'

3、加入基准地址

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

4、把axios挂载到vue原型上 以后vue实例（组件）都是可以直访问的

Vue.prototype.$axios=axios

示例：

一、axios查询所有图书信息

接口网址说明--ShowDochttps://www.showdoc.com.cn/ajaxapi/3753323218792173

<button @click="getBook">获取图书信息</button>

    getBook() {
      this.$axios({
        method: "GET",
        url: "/api/getbooks",
      }).then((res) => {
        console.log(res);
      });
    },

async await方法

    async getBook() {
      let res = await this.$axios({
        method: "GET",
        url: "/api/getbooks",
      });
      console.log(res);
    },

二、axios根据书名获取图书信息

    getBookname(){
      this.$axios({
        method:'get',
        url:'/api/getbooks',
        params:{
          bookname:this.bookname
        }
      }).then(res=>{
        console.log(res);
      })
    },

    <input type="text" v-model="bookname" />
    <button @click="getBookname">根据书名获取图书信息</button>

bookname: "",

async await方法

    async getBookname() {
      let res = await this.$axios({
        method: "get",
        url: "/api/getbooks",
        params: {
          bookname: this.bookname,
        },
      })
      console.log(res);
    },

三、axios添加图书信息图书信息

    addBookname(){
      this.$axios({
        method:'POST',
        url:'/api/addbook',
        data:{
          bookname:this.bookname,
          author:this.author,
          publisher:this.publisher,
        }
      }).then(res=>{
        console.log(res);
      })
    },

    <input type="text" v-model="bookname">
    <input type="text" v-model="author">
    <input type="text" v-model="publisher">
    <button @click="addBookname">添加图书信息</button>

bookname: "",
author:'',
publisher:''

async await方法

    async addBookname() {
      let res = await this.$axios({
        method: "POST",
        url: "/api/addbook",
        data: {
          bookname: this.bookname,
          author: this.author,
          publisher: this.publisher,
        },
      })
      console.log(res);
    },