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

Posted 2021-09-13 张磊

最近打算重构部分项目的遗留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,用来控制界面的加载动画，错误信息，和页面展示数据；