fetch 基本用法（fetch 处理后端数据）-CSDN博客

本文链接：https://blog.csdn.net/weixin_36665875/article/details/129442566

文章介绍了FetchAPI进行POST请求的基本用法，包括设置method、headers和body。通过两级then处理，首先检查响应的status，若为200则执行相应操作，如关闭加载状态、导航跳转和显示成功提示。接着将响应解析为JSON，处理返回的数据，如果存在错误信息，则展示错误警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fetch 的基本用法

fetch 的基本用法
fetch 两级then的却别

fetch 的基本用法

await fetch(url, {
      method: 'POST', // 请求方式
      headers: { 'Content-Type': 'application/json' },   // 头部设置
      body: JSON.stringify({   // 参数体配置
        id: formData.id,
        name: formData.name,
        description: formData.description
      }),
    }).then(res => { 
       // 返回后端数据
       if (res.status === 200) {
        setOpen(false);
        navigate(0);
        alertApi.post({ message: 'Save successful', severity: 'success' });
       }
      return res.json();
    }).then(data => {
      if (data.error?.message) {
        alertApi.post({ message: 'Save failed, ' + data.error.message, severity: 'error' });
      }
    })

fetch 两级then的却别

await fetch(url, {
      method: 'POST', // 请求方式
      headers: { 'Content-Type': 'application/json' },   // 头部设置
      body: JSON.stringify({   // 参数体配置
        id: formData.id,
        name: formData.name,
        description: formData.description
      }),
    }).then(res => {  // 一级 then 
       // res 的类型为Response， 针对status判断
       if (res.status === 200) {
        setOpen(false);
        navigate(0);
        alertApi.post({ message: 'Save successful', severity: 'success' });
       }
      return res.json();  // 返回json 结构的后端数据
    }).then(data => {  二级then
    //  data===res.json， 针对后端返回的数据进行处理
      if (data.error?.message) {
        alertApi.post({ message: 'Save failed, ' + data.error.message, severity: 'error' });
      }
    })