axios拦截器

Posted 2020-11-16 大把小米

* 数据请求前拦截

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

语法：

  1 // 添加请求拦截器
  2   axios.interceptors.request.use(function (config) {
  3       // 在发送请求之前做些什么
  4 
  5       document.querySelector(‘p‘).className = "show"
  6 
  7       return config;
  8     }, function (error) {
  9       // 对请求错误做些什么
 10       return Promise.reject(error);
 11     });
 12 
 13   // 添加响应拦截器
 14   axios.interceptors.response.use(function (response) {
 15       // 对响应数据做点什么
 16 
 17       document.querySelector(‘p‘).className = ‘‘
 18 
 19       return response;
 20     }, function (error) {
 21       // 对响应错误做点什么
 22       return Promise.reject(error);
 23     });

下面是vue代码：

  1 new Vue({
  2     el: ‘#app‘,
  3     data: {
  4       movies: null
  5     },
  6     methods: {
  7       getData () {
  8         axios({
  9           url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809",
 10           headers:{
 11             ‘X-Client-Info‘: ‘{"a":"3000","ch":"1002","v":"5.0.4","e":"154277371928424093566579"}‘,
 12             ‘X-Host‘: ‘mall.film-ticket.film.list‘
 13           }
 14         }).then(res=>{
 15           console.log(‘res‘,res)
 16           this.movies = res.data.data.films
 17         })
 18       }
 19     }
 20   })