axios-拦截器

最新推荐文章于 2022-06-09 13:31:09 发布

lt要努力

最新推荐文章于 2022-06-09 13:31:09 发布

阅读量155

点赞数

分类专栏： Vue 文章标签： axios拦截器拦截器

本文链接：https://blog.csdn.net/louting249/article/details/103099883

版权

Vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

axios拦截器

  数据请求前拦截 
  数据请求得到结果后拦截

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    p{
      display: none;
    }
    .show{
      display: block;
    }
    .hidden{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click = "getData"> getData </button>
    <p> 正在加载... </p>
     <ul>
       <li v-for = "movie in movies" :key = "movie.id">
         {{ movie.name }}
       </li>
     </ul>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>

  /* axios拦截器 
      * 数据请求前拦截 
      * 数据请求得到结果后拦截
  */

  // 添加请求拦截器
  axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么

      document.querySelector('p').className = "show"

      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

  // 添加响应拦截器
  axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么

      document.querySelector('p').className = ''

      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    });

  new Vue({
    el: '#app',
    data: {
      movies: null
    },
    methods: {
      getData () {
        axios({
          url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809",
          headers:{
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154277371928424093566579"}',
            'X-Host': 'mall.film-ticket.film.list'
          }
        }).then(res=>{
          console.log('res',res)
          this.movies = res.data.data.films
        })
      }
    }
  })
</script>