06 Type Ahead

06 Type Ahead

效果

效果图

Demo
Github

知识点

• Promise
  • then()
• Fetch
  • fetch()
• Array
  • filter()
  • map()
  • push()
  • join()
• RegExp
  • match()
  • replace()

笔记

异步编程基础

  JavaScript 引擎是基于单线程事件循环的概念构建的，同一时刻只允许一个代码块在执行，与之相反的是像 Java 和 C++ 一样的语言，它们允许多个不同代码块同时执行。对于基于线程的软件而言，多个代码块用时访问并改变状态时，程序很难维护并保证状态不会出错。
  JavaScript 引擎同一时刻只能执行一个代码块，所以需要跟踪即将运行的代码，那些代码被放在一个任务队列中，每当一段代码准备执行时，都会被添加到任务队列，每当 JavaScript 引擎中的一段代码结束执行，事件循环会执行队列中的下一个任务，它是 JavaScript 引擎中的一段程序，负责监控代码执行并管理任务队列。队列中的任务会从第一个一直执行到最后一个。
摘自《深入理解ES6》第11章：Promise与异步编程

Fetch

Fetch 是基于 Promise 的，用来替代 XMLHttpRequest 的一种方案，今天已被除IE外大多主流浏览器支持（2018.12.15）点击查看浏览器支持度

fetch()

fetch() 方法是 Fetch 提高的一个全局方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

详细使用教程参考：MDN

本例中获取到的数据是 json 格式，

fetch(endpoint)
  .then(response => response.json())  // 获取json数据
  .then(data => cities.push(...data))  // 将数据储存在cities中

这里第一个 then() 中获取到的是 HTTP 响应，还需要转换为 json 格式才能使用。Body（响应/请求的正文）中定义有 json() 方法，可以转换数据为 JSON 对象。

参考资料

• Fetch API
• XMLHttpRequest
• Promise
• AJAX