介绍一个axios调试好用的工具：axios-mock-adapter

Posted 2021-01-20 yangtoude

上一篇文章中写到用promise时应注意的问题，这一篇文章继续介绍一个可以和axios库配合的好工具： axios-mock-adapter。
axios-mock-adapter可以用来拦截http请求，并模拟响应，使用起来也很简单，比如你想模拟下服务器返回个500错误，你可以这么写：

 1 import axios from ‘axios‘
 2 import MockAdapter from ‘axios-mock-adapter‘
 3 
 4 const mock = new MockAdapter(request)
 5 
 6 mock.onPost(‘/url‘).reply(500, {
 7   users: [
 8     { id: 1, name: ‘John Smith‘ }
 9   ]
10 })

然后，在业务代码中你就可以捕获这个500错误

 1 // 业务代码调用
 2 axios({
 3     url: url,
 4     method: ‘post‘,
 5     data: data
 6   }).then(res => {
 7     // 提示用户数据更新成功
 8   }).catch(err => {
 9     // 捕获500等http错误，提示用户更新失败
10   })

什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等，你都能模拟出来，然后写相应的业务代码，这样以往只能依靠后端调试接口的苦日子就快到头了（只是开个玩笑，后端还是不可缺少的）。
有人写了篇更详细的文章 axios请求模拟调试器 来介绍它，感兴趣的可以去看看。

这篇文章最初发表在我自己折腾的博客站点上：介绍一个axios调试好用的工具axios-mock-adapter，该博客用了一位前辈开源的源码，基于thinkjs和vuejs开发，欢迎大家来逛逛。