译｜调整JavaScript抽象的迭代方案

正文

请到「今天看啥」查看全文

_handleError(_res) { return _res.ok ? _res : Promise .reject(_res.statusText); } /** * 获取数据 * @return {Promise} */ get(_endpoint) { return window .fetch( this .url + _endpoint, { method : 'GET' }) .then( this ._handleError) .then( res => res.json()) .catch( error => { alert( 'So sad. There was an error.' ); throw new Error (error); }); } };

在这个模块中，公共方法 API.get() 返回一个 Promise 。我们使用我们抽象出来的 API 模块，而不是通过 window.fetch() 直接调用 Fetch API 。例如，获取用户信息 API.get（'user'） 或当前天气预报 API.get（'weather'） 。实现这个功能的重要意义在于 Fetch API与我们的代码没有紧密耦合。

现在，我们面临一个修改！技术主管要求我们把获取远程数据的方式切换到 Axios 上。我们该如何应对呢？

在我们开始讨论方法之前，我们先来总结一下什么是不变的，什么是需要修改的：

1. 更改：在公共 API.get() 方法中

• 需要修改 axios() 的 window.fetch() 调用；需要再次返回一个 Promise ， 以保持接口的一致, 好在 Axios 是基于 Promise 的，太棒了！
• 服务器的响应的是 JSON 。通过 Fetch API 并通过链式调用 .then( res => res.json()) 语句来解析响应的数据。使用 Axios ，服务器响应是在 data 属性中，我们不需要解析它。因此，我们需要将 .then 语句改为 .then（res => res.data） 。

2. 更改：在私有 API._handleError 方法中：

• 在响应对象中缺少 ok 布尔标志，但是，还有 statusText 属性。我们可以通过它来串起来，如果它的值是 OK ，那么一切将没什么问题（附注：在 Fetch API 中 OK 为 true 与在 Axios 中的 statusText 为 OK 是不一样的。但为了便于理解，为了不过于宽泛，不再引入任何高级错误处理。）

3. 不变之处： API.url 保持不变，我们会发现错误并以愉快的方式提醒他们。

讲解完毕！现在让我们深入应用这些修改的实际方法。

请到「今天看啥」查看全文