fetch普通用法及搭配async,await用法小记

张磊

最近打算重构部分项目的遗留angularJs代码, 写到部分ajax请求的时候想到用async处理下异步,于是找出来之前练习hooks写的代码试验下;代码是之前网上找到的一个练习项目,个人重新写了一遍添加了一小点其他代码。
hooks相关部分不提,单说请求部分的处理。
对async、await有疑问请移步阮一峰ES6入门

fetch 基础用法

fetch函数直接传入参数为获取资源的路径,返回值为一个包含相应结果的promise对象;
可以接受第二个参数(对象)用来控制不同配置,如post请求的入参,headers请求头等等;
具体用法请参考MDN fetch

  const search = async (searchValue) => {
     setLoading(true);
     setErrorMessage(null);
     fetch(`https://www.omdbapi.com/s=${searchValue}&apikey=4a3b711b`)
     .then(response => response.json())
     .then(jsonResponse => {
       if (jsonResponse.Response === "True") {
         setMovies(jsonResponse.Search);
       } else {
         setErrorMessage(jsonResponse.Error);
       }
       setLoading(false);
     });
   };

fetch 搭配 async/await

因为fetch函数本身返回一个promise,是一个Response对象,需要通过.json函数转化为需要的json数据,所以搭配async 可以直接修改为如下写法:

  const search = async (searchValue) => {
    setLoading(true);
    setErrorMessage(null);
    const source = await fetch(
      `https://www.omdbapi.com/?s=${searchValue}&apikey=4a3b711b`
    );
    const jsonResponse = await source.json();
    console.log(JSON.stringify(jsonResponse));
    if (jsonResponse.Response === "True") {
      setMovies(jsonResponse.Search);
    } else {
      setErrorMessage(jsonResponse.Error);
    }
    setLoading(false);
  };

备注

以上示例代码中,setLoading, setErrorMessage, setMovies 等均为hooks,用来控制界面的加载动画,错误信息,和页面展示数据;

阅读 606
12 声望
1 粉丝
0 条评论
你知道吗?

12 声望
1 粉丝
文章目录
宣传栏