前端日刊（200329）JPEG vs. PNG: When and why to use one format ove

阅读列表

JPEG vs. PNG: When and why to use one format over the other。jpeg 是有损压缩，png 是无损压缩，因此同一图片，jpeg 比 png 占据更少的存储。但 png 的一个优势是支持透明背景图片。
Fetch。异常状态码（200-299 范围之外的，比如 404、500）不会导致错误发生。
FormData。当使用 FormData 作为 fetch() 的 body 参数值时，Content-Type 默认就是 multipart/form-data。
Fetch: Download progress。使用 response.body.getReader() 得到的对象的 .read() 方法，一个一个 chunk 的接收数据。
Fetch: Abort。AbortController 是用来终止异步任务的（不是只为 Fetch API 服务的）。调用 controller.abort() 方法，会触发 controller.signal 对象上的 abort 事件。

let controller = new AbortController();
let signal = controller.signal;

// triggers when controller.abort() is called
signal.addEventListener('abort', () => alert("abort!"));

controller.abort(); // abort!

alert(signal.aborted); // true

Fetch: Cross-Origin Requests。使用 fetch() 发送跨域请求时，默认不会携带 Cookie（包括是第三方自身域名下的 Cookie），除了添加 credentials: "include" 选项。

fetch('http://another.com', {
  credentials: "include"
});

使用 GitHub Webhook 实现静态网站自动化部署。这里使用了 Node 包 “github-webhook-handler”来简化参数接收和 Github WebHook 事件监听。
http-server：A simple zero-configuration command-line http server。使用当前目录、在 8080 端口启动一个服务： http-server ./ -p 8080
Yarn：Fast, reliable, and secure dependency management. 使用它安装依赖就是快！yarn global add <package...>
What does enctype='multipart/form-data' mean? 当上传的表单包含文件时（<input type="file">）使用 multipart/form-data，否则使用 multipart/form-data 或 application/x-www-form-urlencoded 皆可，但后者更有效率。
Asynchronous Iterators for JavaScript。ES2018 加入的异步迭代器功能，引入了“请求队列（request queue）”的概念——在前面的请求 resolved 之前，后续可能已经又多次调用了迭代方法（next()），那么每次方法调用时，内部都要用一个队列保存起来，直到等到前面的请求操作完成后，再处理后续请求，保证操作顺序与调用顺序一致。

async function* fetchReq() {
  yield await new Promise(resolve => {
    console.log('1 start')
    fetch('https://slowmo.glitch.me/2000').then(() => resolve('1 complete'))
  })
  yield await new Promise(resolve => {
    console.log('2 start')
    fetch('https://slowmo.glitch.me/2000').then(() => resolve('2 complete'))
  })
}

for await (let res of fetchReq()) {
	console.log(res)
}

// 1 start
// 1 complete
// 2 start
// 2 complete

await-to-js，Async await wrapper for easy error handling without try-catch。例子：let [ err, user ] = await to(UserModel.findById(1));
如何处理 axios.js 请求错误。

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
      
    } else if (error.request) {
      // The request was made but no response was received
      // 什么时候会有 上面 这种情况呢？举一个例子，我们跨域请求了一个接口，但是接口设置了 CORS policy，
      // 这个时候的接口状态码是 200，但没有 response，只有 request
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

跨域资源共享 CORS 详解。
- 服务器响应里的 Access-Control-Allow-Credentials 表示，服务器是否允许客户端请求中携带 Cookie 发送。当然，如果服务器只是一方同意发送 Cookie 也是不行的，还需要在客户端请求的时候明确设置 withCredentials 属性，才会在请求中携带 Cookie。
- CORS 请求分简单请求和非简单请求两种，后者比前者多一步：先发出一个预检请求（preflight request），预检成功之后，在有效期范围内，后续发起的请求步骤与简单请求完全一致。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

一句话技术

国内搜索用必应，翻译使用腾讯翻译君和谷歌翻译。
使用 Flexbox 居中元素的两种方法。

为你的网页添加天气预告（天气网）

一句话其他

疫情期间，为什么会出现抢购卫生纸的现象？与社交媒体有关。我们是社交动物，当其他人采购卫生纸时，我们觉得也应该跟着做。
4 月将迎来三天清明假期。

（正文完）

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。

（完）