fetch的请求
fetch的请求
简介：
由于 Fetch API 是基于 Promise 设计，使用起来很简单，只不过不是基于XMLHttpRequest，是与其平行的一个操作。
fetch简介: https://github.github.io/fetch/
补习Promise: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
案例使用：
未优化版本：使用链式调用
//发送网络请求---使用fetch发送（未优化）
fetch(`/api1/search/users2?q=${keyWord}`).then(
response => {
console.log('联系服务器成功了');
return response.json()
},
error => {
console.log('联系服务器失败了',error);
return new Promise(()=>{})
}
).then(
response => {console.log('获取数据成功了',response);},
error => {console.log('获取数据失败了',error);}
)
优化版本：这个是使用 同步器进行结果获取，只得到状态是对的结果，对于错的状态最后进行 try catch 。然后在操作上面相邻的函数加上 async
//发送网络请求---使用fetch发送（优化）
try {
const response= await fetch(`/api1/search/users2?q=${keyWord}`)
const data = await response.json()
console.log(data);
PubSub.publish('atguigu',{isLoading:false,users:data.items})
} catch (error) {
console.log('请求出错',error);
PubSub.publish('atguigu',{isLoading:false,err:error.message})
}
Promise的链式调用
若返回promise，该 promise 的状态就是外部 then的状态；
若返回非promise，则返回一个成功的promise对象且包裹着这个非promise数据
这个案例就是说你要是服务器跑通了 然后在第一个then里面拿到数据，要是成功了，就走第一个，使用return response.json(),这个是返回的一个promise的实例，根据promise的规则，要是return一个promise，那就是说明本次返回的这个状态就是当前的状态，值就是返回的promise。所以下面链式调用在then里面就能拿到相应返回的promise，要是你return的不是promise值的东西，那就返回一个状态为成功的promise的对象里面包含着你return的数据（不管你是在哪个response里面还是error里面返回）
上面的截图里面为什么要在error里面进行返回一个promise的值，就是为了停下来 你返回promise就是代表着错误的状态的，不然你返回字符串状态还是成功的状态还是往下走
解决：以去掉所有的error。 在最后 .catch（ （error）=> { console.log(error) } ）。
需要注意的是，await右边表达式如果是非promise实例，那么左侧返回值就是右侧表达式返回值，如果是promise那么返回对应的成功/失败的值
优缺点：
- fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
- 老版本浏览器可能不支持
