利用ajax拦截实现前端 mock 数据

有时候前端需要获取一些假的数据，但又不依赖后台的接口，这时候就需要我们自己模拟一个数据接口，旨在帮助前端独立于后端进行开发。俗称 mock 数据。
本文介绍的是利用 axios 进行 mock 数据的方法

先来试用一下

这里我请求一个不存在的路径，正常来说会返回404，但是由于响应被拦截了，而且还返回来一个我们自己定义的response.data数据，我们来打印看看这个response里面有什么：

axios.interceptors.request.use((response)=>{
  response.data = {
    name: 1
  }
  return response
})
axios.get('/xxx')
  .then((response)=>{
  console.log(response)
})

可以看到，我们是可以在response中拿到我们的请求路径、请求方法以及响应的data数据的，如此看来，就可以模拟一个服务器了！
对请求的路径进行判断，返回对应的数据就好了。

axios.interceptors.request.use((response)=>{
let { url } = response.config    // 拿到请求的url
  if( url === '/xxx' ){
      response.data = {
      name: 1
    }
  }else if( url === '/yyy' ){
      response.data = {
        name: 2
      }
    }
  return response
})
axios.get('/xxx')
  .then((response)=>{
  console.log(response)
})

以上。