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那么返回对应的成功/失败的值

优缺点：

1. fetch: 原生函数，不再使用XmlHttpRequest对象提交ajax请求
2. 老版本浏览器可能不支持