JavaScript30 Day 6

这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解

第六天的挑战是在输入框中输入关键字，迅速匹配，展示含有关键字的城市，json数据是从网络中异步获得的。
效果图如下：

Day6效果图

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

const cities = [];
fetch(endpoint)
  .then(blob => blob.json())
  .then(data => {console.log(data);cities.push(...data);});

涉及的新特性：

• promise 可以参考阮一峰的ES6 教程，这是ES6的新特性
  • fetch()
  • then
• RegExp
  • match()：查找匹配的地名
  • replace():替换

  const matchArray = findMatches(this.value, cities);
  const html = matchArray.map(place => {
    const regex = new RegExp(this.value, 'gi');
    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = html;
}

今天的重点是粗略地学习一下fetch()和promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
Promise 有三个状态

• pending : 初始化状态，没有完成或拒绝
• fulfilled: 操作成功完成
• rejected: 操作失败

Promise有两种状态改变的方式，既可以从pending转变为fulfilled，也可以从pending转变为rejected。一旦状态改变，就「凝固」了，会一直保持这个状态，不会再发生变化。当状态发生变化，promise.then绑定的函数就会被调用。
then(onFulfilled, onRejected)：这个方法实际上是把onFulfilled()函数和onRejected()函数添加到Promise对象的回调链中。回调链就像一个由函数组构成的队列，每一组函数都是由至少一个函数构成（onFulfilled() 或者 onRejected() 或者 onFulfilled() 和 onRejected()）。当resolve()或者reject()方法执行的时候，回调链中的回调函数会根据PromiseStatus的状态情况而被依次调用。

传统 Ajax 指的是 XMLHttpRequest（XHR），将来会被 Fetch 替代。
使用XMLHttpRequest发送一个json

xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("错误");
};

xhr.send();

使用fetch()

fetch(url)
         .then(request => request.json)
         .then(data => console.log(data))
         .catch(console.log("错误"));

fetch()的代码明显简洁了很多，api的使用可以参考MDN

---

以上就是我在day6中学到的知识，这里我同样参考了soyaine的中文指南，感谢