安装

npm install axios
yarn add axios

使用

axios({
  method: '请求方式', // get/post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数 提交的数据
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数 查询字符串？后面添加的数据
       xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果 即成功的回调
}).catch(err => {
  console.log(err) // 后台报错返回 ，即失败的回调
})

全局配置

可以在main.js中进行全局配置,统一给url添加前缀基地址，从而达到对地址的统一配置

//配置在main.js里

import axios from "axios"
//基础地址
axios.defaults.baseURL="https://www.escook.cn"
// axios方法添加到Vue原型上
// Vue建议加上$ 避免变量命名冲突
Vue.prototype.$axios=axios

配置完成后可以直接this.$axios()进行使用，无需在其他文件内进行引用

get()请求

// 使用全局属性$$axios
      this.$axios({
        method: "GET",  //默认为GET，get()请求时可不写
        url:"/api/cart",
        params: { // 都会axios最终拼接到url?后面

          //属性名:属性值     用来对请求的数据进行筛选

      }).then(res=>{
        console.log(res);
        this.list=res.data.list //将请求回来的数据赋值给创建的Vue变量
      })

post()请求

通过post请求来添加图书

<template>
  <div>
    <p>3. 新增图书信息</p>
    <div>
        <input type="text" placeholder="书名" v-model="bookObj.bookname">
    </div>
    <div>
        <input type="text" placeholder="作者" v-model="bookObj.author">
    </div>
    <div>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher">
    </div>
    <button @click="sendFn">发布</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      bName: "",
      bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
          bookname: "",
          author: "",
          publisher: ""
      }
    };
  },
  methods: {
    // ...省略了其他代码
    sendFn(){
       axios({
           url: "/api/addbook",
           method: "POST",
           data: {
               appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
               ...this.bookObj  //扩展操作符，表示对象里的所有内容，将其传给data
            // 等同于下面
            // bookname: this.bookObj.bookname,
            // author: this.bookObj.author,
            // publisher: this.bookObj.publisher
           }
       }) 
    }
  },
};
</script>