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

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

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

解决跨域问题

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

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

封装请求工具

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

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

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

包装请求

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

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

使用

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

所以我们可以通过 async 和 await 来把异步操作同步化（扩展阅读：js 异步 你还应该知道的那些事儿）

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