🌮微卷不亏，4 分钟优化 Fetch 函数写法~

掘金安东尼

发布于 2022-09-19 11:00:12

3830

发布于 2022-09-19 11:00:12

文章被收录于专栏：掘金安东尼

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

本篇译自：javascript.plainenglish.io/how-to-make-your-js-fetch-not-look-so-ugly

上一篇介绍了啥叫“微卷不亏”，今天继续简单微卷一些小知识点：本篇带来《如何优化 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！这就是声明式代码！这就是更可读的代码！