Vue axios

 

Test9.vue

<template>
  <div id="test9_body">
    <div id="header"><h1>上标题</h1></div>
    <div id="body">
      <div id="navl">
        左导航
        <div>
          Test9
          <div>
            <button @click="getReq()">发起get请求</button>
            <button @click="postReq()">发起post请求</button>
            <button @click="allReq()">发起并发请求</button>
          </div>
        </div>
      </div>
      <div id="main">
        中内容
        <router-view></router-view>
      </div>
      <div id="navr">右导航</div>
    </div>
    <div id="footer"><p>下版权</p></div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'Test9',
  setup(){
    axios.defaults.baseURL='http://localhost:8088/hbl';
    axios.defaults.timeout=5000;
    // axios.defaults.post['Content-Type']='application/x-www-form-urlencoded';
    axios.interceptors.request.use((config)=>{
      config.abc="aaa";
      console.log(config);
      return config;
    },(error)=>{
      return Promise.error(error);
    })

    const getReq = ()=>{
      // console.log("===getReq==");

      // axios.get('http://localhost:8088/hbl/location/getAllErpProvinces').then((res)=>{
      //   console.log(res.data);
      // }).catch((error)=>{
      //   console.log(error);
      // })

      // axios({
      //   method: 'get',
      //   url:'http://localhost:8088/hbl/location/getAllErpProvinces'
      // }).then((res)=>{
      //   console.log(res.data);
      // }).catch((error)=>{
      //   console.log(error);
      // })

      // axios.get('http://localhost:8088/hbl/location/getErpCitiesByProvinceCode2',{
      //   params:{
      //     code:360000
      //   }
      // }).then((res)=>{
      //   console.log(res.data);
      // }).catch((error)=>{
      //   console.log(error);
      // })

      axios({
        method: 'get',
        params:{
          code:360000
        },
        url:'http://localhost:8088/hbl/location/getErpCitiesByProvinceCode2'
      }).then((res)=>{
        console.log(res.data);
      }).catch((error)=>{
        console.log(error);
      })

    }

    const postReq = ()=>{
      // axios.post('http://localhost:8088/hbl/location/getErpCitiesByProvinceCode3',{
      //     // code:110000
      // },{
      //   params:{
      //     code:360000
      //   }
      // }).then((res)=>{
      //   console.log(res.data);
      // }).catch((error)=>{
      //   console.log(error);
      // })

      axios({
        method: 'post',
        params:{
          code:360000
        },
        data:{
          // code:110000
        },
        url:'http://localhost:8088/hbl/location/getErpCitiesByProvinceCode3'
      }).then((res)=>{
        console.log(res.data);
      }).catch((error)=>{
        console.log(error);
      })
    }

    //并发请求
    const allReq = ()=>{
      // axios.all([
      //     axios({
      //         method: 'get',
      //         params:{
      //         code:110000
      //         },
      //         url:'http://localhost:8088/hbl/location/getErpCitiesByProvinceCode2'
      //     }),
      //     axios({
      //       method: 'post',
      //       params:{
      //         code:360000
      //       },
      //       data:{
      //         // code:110000
      //       },
      //       url:'http://localhost:8088/hbl/location/getErpCitiesByProvinceCode3'
      //     })
      // ]).then((res)=>{
      //   console.log(res[0].data);
      //   console.log(res[1].data);
      // }).catch((error)=>{
      //   console.log(error);
      // })

      axios.all([
          axios({
              method: 'get',
              params:{
              code:110000
              },
              url:'/location/getErpCitiesByProvinceCode2',
              // baseURL:'http://localhost:8088/hbl',
            timeout:3000,
            responseType:'json',//stream
          }),
          axios({
            method: 'post',
            params:{
              code:360000
            },
            data:{
              // code:110000
            },
            url:'/location/getErpCitiesByProvinceCode3',
            // baseURL:'http://localhost:8088/hbl',
          })
      ]).then(axios.spread((res1,res2)=>{
          console.log(res1);
          console.log(res2);
      })).catch((error)=>{
        console.log(error);
      })
    }


    return{
      getReq,
      postReq,
      allReq
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* CSS Document */
/**{*/
/*  margin:0;*/
/*  padding:0;*/
/*}*/
/*body{*/
/*  margin:10px;*/
/*}*/
#test9_body{
  margin:0;
  padding:0;
  /*margin:10px;*/
  /*width:600px;*/
  /*height: 100%;*/
  /*margin:0 auto;*/
  /*height:400px;*/
  height:auto;
  min-height:500px;
  /*width:800px;*/
  background:#bbeeeb;
  margin:0 auto;
}

#header{
  border:1px solid black;
  /*width:600px;*/
  height:60px;
  margin:0 auto;
  margin-bottom:10px;
}
#header h1{
  height:60px;
  line-height:60px;
  font-size:16px;
  text-align:center;
}
#body{
  /*width:600px;*/
  margin:0 auto;
}
#navl{
  border:1px solid black;
  width:150px;
  height:auto;
  float:left;
  margin-bottom:10px;
  background:lightcyan;
  overflow: auto;
}
#main{
  border:1px solid black;
  /*width:294px;!*边框也算一个像素*!*/
  width: auto;
  min-width: 300px;
  height:auto;
  float:left;
  margin-bottom:10px;
  background:lightblue;
}
#navr{
  border:1px solid black;
  /*width:150px;*/
  /*height:500px;*/
  float:right;
  margin-bottom:10px;
  background:lightyellow;
}
#footer{
  border:1px solid black;
  /*width:600px;*/
  height:60px;
  line-height:60px;
  margin:0 auto;
  text-align:center;
  clear:both;
}
</style>