这是我在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的中文指南，感谢
