在vue中的axios请求数据前如何对数据进行劫持

前言

今天同事一起探讨了一个问题，就是后台返回来的数据，有一些接口需要弹框处理不同的业务。
返回来的数据要进行加工处理，在弹框中点击取消按钮还需要关闭弹框的同时阻断继续请求。
同事一开始以为不可能在公用层写一个公用的弹框做不一样的业务处理。
但是这个确实是可以解决的问题，不需要在业务页面进行独立的处理。需要用到异步处理。

处理逻辑

1. 在axios处理之前就需要对它进行截获了，有一个钩子，axios.interceptors.request.use可以实现；
2. 由于需要弹框来决定往下走与否，我们就要加一个异步的方法阻断，我们这里就加promise就行了；
3. 在弹框中写好逻辑，确认一旦点击就可以往下走。

具体代码

service.interceptors.request.use(config => {
  return new Promise((resolve) => {
    if (true) {
      MessageBox('是否需要往下请求数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // Do something before request is sent
        // 这里是原来逻辑的代码
        resolve(config)
      })
    } else {
      resolve(config)
    }
  })