优化建议

Question

老师，建议项目可以做一些优化，我想到的有3处：
1： 页面里很多map循环的地方没有加上key, 控制台一堆提示
2: jwt 好多页面里要获取
const jwt = useSelector((s) => s.user.token) as string;
dispatch(placeOrder({ jwt, orderId: order.id }))，
在redux里好多地方请求接口又要传上{ headers: { Authorization:bearer ${jwt}, }, }
建议抽出来统一放在axios.defaults.headers里
3： 在页面里接口请求异常时应该暴露出来，实际工作中一般都会在页面提示相应的错误或者是出现其他的交互

Answer 1

阿莱克斯刘 2021-02-21 04:18:43

非常感谢你的建议，我会逐一进行修改。不过对于你的第二个建议，我有不同的观点，因为，我们的课程案例比较简单，api的请求域只有一个，“123.56.149.216”。但是，如果你的项目复杂起来，http请求无可避免会涉及第三方的api请求，这个时候如果还把jwt自动携带在header中很显然是不明智的。

所以，解决方案有两个：

• 第一，使用cookie来保存jwt数据，这样在访问同源api的时候（123.56.149.216），cookie会被自动携带。其他域名则不会携带jwt数据。

• 第二，对axios做二次封装，通过不同的函数签名来决定是否携带header。

另外，关于请求异常，由于课程时常的限制，没有办法对每个页面、每个组件、每个api做出对应的异常处理，所以课程只是做了一个最基本的try catch。非常感谢你的建议，课程我会不断更新，更加细化具体的内容。

• 前端小夏 #1

  老师建议把这样的url请求：“await axios.post("http://123.56.149.216:8080/auth/register" 统一管理起来，不然后期一但换域名，都要统一改一遍，特别麻烦。