fetch 基本用法（fetch 处理后端数据）

最新推荐文章于 2023-07-28 13:44:14 发布

一路向阳向北

最新推荐文章于 2023-07-28 13:44:14 发布

阅读量625

点赞数

分类专栏： React typescript 文章标签： json 前端 javascript typescript

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

版权

React 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

typescript

3 篇文章 0 订阅

订阅专栏

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' });
      }
    })