4 分钟优化 Fetch 函数写法~

2022 年 9 月 20 日
广东
本文字数：1069 字
阅读完需：约 4 分钟

上一篇介绍了啥叫“微卷不亏”，今天继续简单微卷一些小知识点：本篇带来《如何优化 Fetch 函数写法》，轻松拿下~

冲！

<hr>

常规 Fetch 是这样写的：

fetch('http://example.com/movies.json')  .then(response => response.json())  .then(data => console.log(data));

复制代码

第一个 .then 里面是一个匿名函数，将返回转换为 json 格式；

这样写，不那么可读，且不够 DRY（Don't repeat yourself）~ 因为匿名函数并没有告诉你函数功能，并且每次 Fetch 都要转换数据为 json 的话，为什么不抽出一个可被复用的函数？

事实上，我们总是需要对从后端拿回的数据进行处理的，所以将处理过程进行封装也是有必要的~

function getResponse(response){ return response.json() }

fetch('http://example.com/movies.json')  .then(getResponse)  .then(data => console.log(data));

复制代码

以，同样的道理，将第二个 .then 内部的匿名函数进行封装：

function processJSON(json){  for(let i = 0; i < json.length; i++)  {    console.log(json[i])  }}
fetch('http://example.com/movies.json')  .then(getResponse)  .then(processJSON);

复制代码

Wow! 现在 fetch 函数看起来清晰多了！fetch => 处理响应 => 处理 JSON 数据；语义化的代码，所见即所是！

PS：其实，这个思想和函数式编程也是一致的，减少使用匿名函数，将处理过程用函数封装，封装函数的函数名都是有具体含义的，让它们来处理数据流，这才是正真可读的代码~

上述代码，处理还能更进一步：

const moviesPath = 'http://example.com/movies.json'
fetch(moviesPath)  .then(getResponse)  .then(processJSON);

复制代码

这就是 Fetch 函数清爽干净的样子！

再举个栗子🌰

POST 写法

// 优化前

fetch('https://example.com/profile', {  method: 'POST', // or 'PUT'  headers: {    'Content-Type': 'application/json',  },  body: JSON.stringify(data),}).then(response => response.json())

复制代码

// 优化后

function writeServer(action, data={}){ return { method: action, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) } }

fetch(moviesPath, writeServer("POST", newMovie))  .then(getResponse)  .then(processJSON);

复制代码

这就是 DRY！这就是声明式代码！这就是更可读的代码！

看到这里，我们也知道了，这种优化思路（封装、声明式、数据流）不仅仅限于 Fetch 函数中，其它数据处理的过程都可以应用~ 从细节着手！

OK，以上便是本篇分享；撰文不易，点赞鼓励👍👍👍

我是掘金安东尼，公众号同名，日拱一卒、日掘一金，再会~~

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/2c7332adfa0a4d6b655bfaced】。文章转载请联系作者。

掘金安东尼

关注

安东尼陪你度过漫长编程岁月~ 2022.07.14 加入

真正的大师，永远怀着一颗学徒的心（易）

发布

暂无评论

创作场景

4 分钟优化 Fetch 函数写法~

掘金安东尼

评论