3-7http请求

一、安装axios

yarn add axios

import axios from 'axios'; // 是在.vue文件中  写了这个就不用写下一行  不用挂载到原型上
Vue.prototype.axios = axios

<script>
import axios from 'axios';
export default {
  name: 'home',
  data(){
    return{
      list:[]
    }
  },
  mounted(){
    axios.get("http://yapi.demo.qunar.com/mock/36046/cart").then(res=>{
      this.list = res.data;
      console.log(this.list)
    })
  }
}
</script>

二、vue中axios发送请求（请求成功弹框，并把input输入框的值清空）

接口地址：https://devqixin.91djb.net/score-mall-v19/service/taylor/swift.php
数据结构：{
“func”: “t:lotteryBaby”,
“params”: {
“enterprise”: “保护伞公司”,
“product”: “Tesla”,
“phone”: “13800138000”,
“city”: “浣熊市”,
“name”: “威斯克”
}
}
直接上代码

handleClick() {
           var that =this;
      console.log("发送数据");
      axios({
        url:
          "https://devqixin.91djb.net/score-mall-v19/service/taylor/swift.php",
        method: "post",
        data: {
          func: "t:lotteryBaby",
          params: {
            enterprise: that.enterprise,
            product: that.product,
            phone: that.phone,
            city: that.city,
            name: that.name,
          },
        },
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then(function(response) {
          console.log(response);
          if(response.data.code == 200){
            alert("提交成功")
            that.enterprise ='';
            that.product ='';
            that.phone='';
            that.city='';
            that.name='';
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }

返回数据

成功！