上一篇文章讲了我所使用的后端验证流程,针对这样的流程,前端在发请求的时候也应该遵照基本相同的逻辑

由于在发请求的时候还要带上签名、时间戳等等,所以每一个请求应该走封装好的请求工具,不必每次请求都重新去计算签名。

  • 解决跨域
  • 封装请求工具
  • 包装请求
  • 使用

解决跨域问题

跨域是浏览器的一个安全策略,即不允许网站向其他域名发送异步请求。所以前端要解决跨域问题。(拓展阅读:跨域和跨域问题的解决

所以我们通常使用代理的方式将服务端地址代理到当前网站的 /api

封装请求工具

无论是使用包括但不限于 fetch / axios / umi-request 这些方案中的任何一个发送异步请求,都应该把它包装成工具类,这样做有很多好处

  1. 统一设置 header 的 Authorization
  2. 统一的状态管理(例如遇到指定状态码,跳转到登录界面)
  3. 统一的超时设置
  4. 统一设置拦截器(request/response)
  5. 不必每次都单独计算签名
    等等

可以使用 Promise 对请求进行包装

包装请求

在一个文件里把请求全部包装好,当请求地址、方法发生变化时,只需要改一处即可

如果你使用 ts,还可以在这里对传来的 params,以及返回的 returns 进行验证(使用 Interface 数据类型)

使用

由于请求是异步的,和 Promise 一样会进入事件循环

所以我们可以通过 asyncawait 来把异步操作同步化(扩展阅读:js 异步 你还应该知道的那些事儿

以上就是前端请求时候应该注意的问题
后端的部分,请参考前端和后端应该如何优雅的沟通【上】:后端验证