|
js下的下强post库,第一反应就是下强axios。但真把它当“库”用,下强很多人其实只用到了皮毛。下强axios的下强post方法,远不止发个请求那么简单。下强它内部对数据序列化、下强请求头处理、下强错误捕获都做了深度封装,下强只是下强这些细节常被忽略。 举个例子。下强你在项目里发一个post请求,下强传一个对象。下强axios会默认把数据转成JSON,下强Content-Type自动设成application/json。下强但如果你传的是URLSearchParams实例,它又会自动转成application/x-www-form-urlencoded。这种自动判断,省了多少手动拼接的功夫。可恰恰是这种“智能”,让很多人在遇到服务端只认form-data格式时,一头扎进坑里。其实axios里用FormData对象就行,它识别出来后会正确设置multipart/form-data并带上boundary。这种细节,文档里写得明明白白,但真正用对的人不多。 再说超时处理。axios的post支持timeout参数,单位是毫秒。设了之后,如果请求超过指定时间没返回,会触发error。但error对象里的code是ECONNABORTED,不是常见的网络错误码。很多人写拦截器时,只判断error.response,结果超时的时候error.response是undefined,直接报错。我见过不少线上事故,就是没区分超时错误和其他网络异常,导致页面白屏。正确做法是判断error.code,再单独处理超时逻辑。 拦截器是axios最强大的地方,但用得好的团队真不多。请求拦截器里可以统一加token、加时间戳防缓存、统一序列化数据。响应拦截器里可以统一解包数据、统一弹错误提示。但这里有个坑——拦截器里如果抛出错误,会直接中断后续的then链。我见过有人直接在响应拦截器里返回response.data,导致后续代码拿不到完整response,想访问headers时发现是undefined。这种设计上的权衡,需要开发者自己心里有数。 另一个容易被忽略的点是取消请求。axios基于XHR实现,但提供了CancelToken来取消请求。这在搜索框防抖、组件卸载时取消未完成的请求,特别有用。不过CancelToken的用法有点反直觉——你得在请求配置里传一个cancelToken实例,然后在外部调用cancel方法。这种控制反转的设计,刚开始用会有点绕,但习惯之后,确实能避免很多因组件卸载后setState导致的警告。 如果你觉得axios太重,原生fetch也支持post,但处理起来要手动很多。fetch默认不带cookie,得手动加credentials;fetch对4xx、5xx状态码不会reject,只会在网络错误时reject,你得自己检查response.ok。这些坑,axios都帮你填平了。所以,除非项目极小、不需要兼容旧浏览器,否则没必要自己撸一个请求库。 最后说个冷门但实用的点。axios的post方法支持泛型,TypeScript项目里可以这样写:axios.post<User>('/api/user', data)。这样返回的response.data类型就是User,不用再手动断言。这个特性在团队协作时特别有用,能减少很多不必要的类型转换代码。 axios这个库,说简单也简单,就是一个post方法的事。但真要把它用顺、用透,还是得花时间研究那些边角料。别等线上出了bug再回头查文档,提前把机制摸清,写起来才顺手。 |