本篇译自：javascript.plainenglish.io/how-to-make…
上一篇介绍了啥叫“微卷不亏”，今天继续简单微卷一些小知识点：本篇带来《如何优化 Fetch 函数写法》，轻松拿下~
冲！
常规 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，以上便是本篇分享；撰文不易，点赞鼓励👍👍👍
