axios服务器通信—4axios拦截器和配合vue使用

今天药忘吃喽~ 2022-10-02 00:56 138阅读 0赞

并发请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

<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'
        }
      })
    
      HTTP.interceptors.request.use(function(config){
        //在发送请求之前做某事
        console.log("拦截")
        console.log(config)
        return config;
      },function(error){
        //请求错误时做些事
        return Promise.reject(error);
      });
    
      HTTP.interceptors.response.use(function(data){
          console.log("response")
          console.log(data)
          return data;
      })
    
    
    
    
      export default {
      name: 'hello',
      created(){
    
        function http1(){
          return HTTP.get("test-axios")
        }
    
        function http2(){
          return HTTP.post("test-post-axios")
        }
    
    
          axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{
              console.log(res1)
              console.log(res2)
          }))
          .catch((error) =>{
            if (axios.isCancel(error)) {
              console.log(error.message);
            }else{
                console.log(error)
            }
        })
    
      }
    }
    </script>
    
    
    <style scoped>
      .hello {
        font-size: 30px;
      }
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

![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>
    
    
    
    
      export default {
      name: 'hello',
      created(){
          this.$http.get('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-axios')
          .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/6f0e8b95d77448e9a7149a76b180ae3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220113/390aba1c299940d49cf3fa0a231b558a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220113/6c8183d166d746999d4de0ba2effd479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220113/589672298bb74a5da83345c940d52e79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220113/fcd349974ccb4d5fbe9e5600b2fc3f37.png