Next.js脚手架进阶系列
封装fetch
首先先来说一下为什么要用fetch而不是axios吧,主要有以下两点:
- 第一,我在另一个脚手架express-react-scaffold里使用的就是axios,秉着学习新东西的想法,想自己封装一下fetch。
- 第二,个人觉得fetch的功能更为强大,因为fetch是原生支持的API,更加的底层,所以可扩展性更好,经过封装扩展过后的fetch应该是很强大的,由于看了很多成熟脚手架用的都是fetch,我觉得这个观点还可以接受吧。(P.S.个人观点,不喜勿喷)
fetch的response
为什么要单独说一下fetch的response呢,个人认为这一点既是fetch的缺点又是fetch的优点,我们先来对比一下正常的请求fetch和axios的区别
// fetch
fetch(url)
.then(res => { // 第一层res
res.json() // 需要json过后才是我们想要的数据
.then(r => { // 第二层res
console.log(r) // 获取到最后数据
})
});
// axios
axios(url)
.then(res=>{ // 第一层res
console.log(res); // 获取到我们想要的数据
});
复制代码
如上面所示,我们需要先对fetch的res进行res.json()之后才拿到我们想要的json数据,而axios帮我们做了,使用起来更简单~
这算是一个缺点吧~但是!!!我们通过封装完全可以解决的,接下来就是为啥这也是fetch的优点了,首先来说说为啥fetch需要两层才可以,第一层进行的是res.json(),因为fetch的response是一个综合各种方法的对象,并不是请求的数据,也就是说其实