vue axios调用后端接口

方式一
1、不传参数的
step1：npm i axios
step2:在组件的标签内引入如下代码（注意在script标签内）

import Vue from "vue";
import axios from "axios";
Vue.use(axios)

export default {
  methods:{
    loadData(){
       axios.get("接口url")
      .then(function(res){
        alert(1213);
        console.log(res.data);
      })
      .catch(function(res){
        alert(4567)
        console.log(res);
      })
    }
  }
};

2、向后发送json数据
step1、npm i qs
step2

import Vue from "vue";
import axios from "axios";
import qs from 'qs'
Vue.use(axios)
Vue.use(qs)

export default {
  methods:{
    loadData(){
      var fileCode="www.baidu.com";
      var picc={"key":"121212"};//fileCode为访问的url，qs.stringify(picc)为要传送的数据
      axios.post(fileCode,qs.stringify(picc))
      .then(function(res){
        alert(45454);
        console.log(res.data);
      })
      .catch(function(res){
        alert(12333)
        console.log(res);
      })
    }
  }
};

方式二

axios({
        url: fileCode,//接口url
        method: 'post',//方式
        data: {//向后端发送数据，可选
          configData: that.layoutData,
          fileName: "xaut",
        },
      }).then(function (res) {
          var response=res.data;
          that.zmzm1=response["data"]
          console.log(response["data"]);
      }, function (res) {
        console.info(res)
      });