axios服务器通信—2转换请求数据配置

缺乏、安全感 2022-10-02 00:49 163阅读 0赞

那么使用get方式如何传参呢？看下面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

post传参

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

<template>
      <div class="hello">
        一起学习axios
      </div>
    </template>
    
    <script>
    
      import axios from 'axios'
      import queryString from 'queryString'
    
      var HTTP = axios.create({
        baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
        timeout: 1000,
        responseType:'json',
        headers:{
          'custome-header': 'miaov',
          'content-type':'application/x-www-form-urlencoded'
        },
        transformRequest:[function(data){
            console.log(data)
          data.age = 30;
          return queryString.stringify(data);
        }],
        transformResponse:[function(data){
            console.log("transformResponse")
            console.log(data)
    
          data.abc = 'miaov'
    
          return data;
        }],
        /*validateStatus(status){
            console.log(status)
          return status < 400;
        }*/
      })
    
    export default {
      name: 'hello',
      created(){
        HTTP.post("test-post-axios123",{
            miaov:"ketang",  // miaov=ketang&username=leo
            username:"leo"
        })
          .then((response)=>{
              console.log(response.data)
          })
          .catch((error) =>{
            console.log(error)
        })
      }
    }
    </script>
    
    
    <style scoped>
      .hello {
        font-size: 30px;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220113/b9a084535e284f1c8b2d2ade8380e02d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220113/b73c8349b03e4bbea8507b6dfd49eb05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220113/c903c1ddbd494502acd0563acef26c3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220113/f4f56ea40e6846039b40ccf5814b284b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220113/3888643ee6164ef0a72eee492266d989.png