上一篇文章中写到用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开发,欢迎大家来逛逛。