简单的前端网络层Service封装
我们编写前端组件时，常常需要拉取数据。最原始的办法就是在组件中调用网络库去请求数据。但这样有一些问题：发送请求的一些代码需要重复的编写。 比如fetch的json()方法，拿到返回数据之后进行错误处理的代码。一个典型的使用场景是这样的： fetch('/api/v2.0' + this.Url + '/?page=' + this.page_num) .then(res => { return res.json() }) .then(res => { if (res.code === 200) { this.items = res.blogs this.pages_count = res.pages_count this.page_num = res.page this.blog_num = res.blog_num }else { util.message("Error:", res.message) } }) } 而且在发送请求这个操作中，带有请求的URL等等和组件业务逻辑无关系不大的数据，我们希望可以集中管理这些请求的路由，并且集中处理错误。 下面就介绍一种最简单的前端网络层封装，我将其称为Service。 简单的Fetch封装 为了避免在每次调用fetch时都要设置各种header和参数，我们可以对fetch做一个简单的封装： function Fetch(url, opt = {}) { // 设置请求方法 opt.method = opt.method || 'GET'; // 处理要发送的数据 if (opt.data) { if (/GET/i.test(opt.method)) { url = `${url}&${obj2query(opt.data)}`; } else { opt....