尝试使用 catch 或 async await 来开玩笑

Question

我正在JEST 中运行我的第一个单元测试。我安装了Jest Fetch Mock，但仍然收到错误消息“The promise rejected with reason FetchError”。

我做了一些阅读，我想我需要添加一个 async await 或 try catch。有人可以帮我解决这个问题吗？

这是我在useEffect 中制作的fetch。

const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true)
    
    fetch("https://api.github.com/search/repositories?q=created:%3E2017-01-10&sort=stars&order=desc")
    .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [500]);

Answer 1

 const [data, setData] = useState(null);
 const [isLoading, setLoading] = useState(false);

 useEffect(async() => {
   setLoading(true)
   try{
        const res = await fetch("https://api.github.com/search/repositories?q=created:%3E2017-01-10&sort=stars&order=desc")
        const data = await res.json()
        setData(data)
        setLoading(false)
     }catch(err=>{
        console.log(err)
      })
    
   }, [500]);

Answer 2

效果更好

const fetchList = async () => {

const newList = await fetch("https://api.github.com/search/repositories?q=created:%3E2017-01-10&sort=stars&order=desc") .then((res) => res.json()) .then((数据) => { 设置数据（数据） 设置加载（假） }) } 获取列表（） }, [500]);

Answer 3

你可以试试这个，

 const [data, setData] = useState(null);
 const [isLoading, setLoading] = useState(false);

 useEffect(async() => {
   setLoading(true)
   try{
        const data = await 
          fetch("https://api.github.com/search/repositories? 
              q=created:%3E2017-01- 
         10&sort=stars&order=desc")
    const json = await data.json();
    if(json){
        setData(json)
        setLoading(false)
      } 
     }catch (e) {
    console.error(e);
    }
    
   }, [500]);