
前端和后端应该如何优雅的沟通【下】:前端请求
上一篇文章讲了我所使用的后端验证流程,针对这样的流程,前端在发请求的时候也应该遵照基本相同的逻辑
由于在发请求的时候还要带上签名、时间戳等等,所以每一个请求应该走封装好的请求工具,不必每次请求都重新去计算签名。
- 解决跨域
- 封装请求工具
- 包装请求
- 使用
解决跨域问题
跨域是浏览器的一个安全策略,即不允许网站向其他域名发送异步请求。所以前端要解决跨域问题。(拓展阅读:跨域和跨域问题的解决)
所以我们通常使用代理的方式将服务端地址代理到当前网站的 /api
下
封装请求工具
无论是使用包括但不限于 fetch / axios / umi-request 这些方案中的任何一个发送异步请求,都应该把它包装成工具类,这样做有很多好处
- 统一设置 header 的 Authorization
- 统一的状态管理(例如遇到指定状态码,跳转到登录界面)
- 统一的超时设置
- 统一设置拦截器(request/response)
- 不必每次都单独计算签名
等等
可以使用 Promise 对请求进行包装
包装请求
在一个文件里把请求全部包装好,当请求地址、方法发生变化时,只需要改一处即可
如果你使用 ts,还可以在这里对传来的 params,以及返回的 returns 进行验证(使用 Interface 数据类型)
使用
由于请求是异步的,和 Promise 一样会进入事件循环
所以我们可以通过 async
和 await
来把异步操作同步化(扩展阅读:js 异步 你还应该知道的那些事儿)
以上就是前端请求时候应该注意的问题
后端的部分,请参考前端和后端应该如何优雅的沟通【上】:后端验证
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 黑米说
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果