Next.js脚手架进阶 — 封装fetch && 增加中间件

Next.js脚手架进阶系列

• 完美契合ant-design
• 封装fetch && 增加中间件
• 部署上线

封装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是一个综合各种方法的对象，并不是请求的数据，也就是说其实