介绍

axios是一款异步请求组件，支持常用的请求方式，自动的组装请求数据，

尤其和vue使用的时候会更加有优势，

全局拦截器

将axios绑定到Vue实例中，可以在全局使用，

  1. // 全局拦截器   在请求的时候添加加载动作，也可以通过store中的变量控制不同的情况情况触发不同的加载动作。
  3. import axios from 'axios'
  4. import {REST_API} from '../config'
  5. import {Message} from 'iview'
  6. import store from '../store';
  8. axios.defaults.timeout = 60000
  9. axios.defaults.baseURL = REST_API
  10. axios.defaults.showSpin = true  //请求加载loading效果
  11. axios.defaults.showMsg = false  //请求后是否弹出消息
  13. // Add a request interceptor
  14. axios.interceptors.request.use(function (config) {
  15.   // config.headers['Authorization'] = 'Bearer '+store.getters.token
  16.   if(store.getters.check){
  17.     console.log("lalalla",)
  18.     store.state.app.checkShow = true;
  19.   }
  20.   else if(config.showSpin) {
  21.     document.querySelector('#global-spin').style.display = 'block'
  22.   }
  23.   return config;
  24. }, function (error) {
  25.   console.log('>>> 发送失败。', error)
  26.   document.querySelector('#global-spin').style.display = 'none'
  27.   store.state.app.checkShow = false;
  28.   return Promise.reject(error);
  29. })
  31. // Add a response interceptor
  32. axios.interceptors.response.use(function (response) {
  33.   document.querySelector('#global-spin').style.display = 'none'
  34.   store.state.app.checkShow = false;
  35.   store.state.app.check = false
  36.   return check(response)
  37. }, function (error) {
  38.   check(error.response)
  39.   console.log('>>> 返回失败。', error.response)
  40.   document.querySelector('#global-spin').style.display = 'none'
  41.   store.state.app.checkShow = false;
  42.   store.state.app.check = false
  43.   return Promise.reject(error);
  44. })
  46. // 实例拦截器
  47. let instance  = axios.create()
  48. 在instance中添加拦截器，实例中的拦截器不会触发全局的拦截器；

异步请求

Promise

  1. return new Promise(function (reslove, reject) {
  2.             if (displayDate === 'none') {
  3.                 if (type === 'a') {
  4.                     facade.queryTop15In().then((res) => {
  5.                         if (res.status === 200) {
  6.                             reslove(res.data)
  7.                             // console.log("displayDate 先执行")
  8.                         }
  9.                     })
  10.                 } else if (type === 'b') {
  11.                     facade.queryTop15Out().then((res) => {
  12.                         if (res.status === 200) {
  13.                             reslove(res.data)
  14.                             // this.setState({
  15.                             //     top15Data:res.data
  16.                             // })
  17.                         }
  18.                     })
  19.                 }
  20.             } else {
  21.                 console.log("top15Data 执行这里？")
  22.                 this.state.top15Data = [],
  23.                     this.setState({
  24.                         top15Data: [],
  25.                     })
  26.             }
  27.         })

前后台分离的重定向

https://blog.csdn.net/li_gameover/article/details/79917473

整体思路： 在后台设置filter，进行校验token，
如果没有检验通过，设置响应头，在响应头添加一个字段，表明事重定向，
前台 使用拦截器，可以进行统一的拦截解析，进行重新路由