fetch 的 response.ok

记录一下自己的 http 库在这上面踩的一个坑
更新于: 2024-01-29 08:43:34

cheatsheet

场景代码
正常
fetch('https://jsonplaceholder.typicode.com/todos/4') 
 .then(response => response.json())
 .then(result => console.log('success:',result)) 
 .catch(error => console.log('error:', error));
出错
fetch('https://jsonplaceholder.typicode.com/todos/2382822') 
 .then(response => response.json())
 .then(result => console.log('success:',result)) 
 .catch(error => console.log('error:', error));
正确"姿势"
fetch('https://jsonplaceholder.typicode.com/todos/4') 
 .then((response) => {
   if (response.ok) { 
    return response.json();
   }
   return Promise.reject(response); 
 })
 .then((result) => { 
   console.log(result); 
 })
 .catch((error) => {
   console.log('Something went wrong.', error); 
 });

知识点

  • fetch只有在请求失败时才进入 catch 处理程序,例如当网络不可用或域不存在时(物理服务报错/超时)
  • 应用服务报错,并不会进入 catch,而是 response.ok 为 false

参考