fetch的使用

Fetch的过程与xhr不一样的地方就在于它是关注分离的:发起请求后先返回一个promise表示是否成功访问到了服务器,然后拿到服务器结果后再返回一个Promise携带访问的结果。
这里用一个React.js的例子说明下:

// 记得包含下面的代码片段的函数前要有async
try{
  const response = await fetch(`/api1/search/users?q=${keyWord}`); // 第一个Promise返回一个对象,包含了是否正常访问等信息
  const data = await response.json();    // 这里的response.json()返回了一个包含结果数据的Promise,在这里有访问状态码等信息
  PubSub.publish('atguigu',{someMessage:data});
}catch(error){
  console.log(error);
  PubSub.publish('atguigu',{someMessage:error});
}

目前fetch的浏览器支持性不是太好,但是与xhr相比更高级点

posted @ 2021-06-26 14:27  Bravo_Jack  阅读(71)  评论(0编辑  收藏  举报