webpack+antd+fetch 通讯 , 打包上线

最新推荐文章于 2020-08-24 05:06:43 发布

置顶

重阳微噪

最新推荐文章于 2020-08-24 05:06:43 发布

阅读量611

点赞数 2

分类专栏： fetch antd react 前端文章标签： webpack react fetch 打包上线打包

本文链接：https://blog.youkuaiyun.com/weixin_44160385/article/details/96835370

版权

本文介绍了如何在webpack+antd项目中利用fetch进行数据通信，包括fetch的引入、get和post请求的封装、在页面中的调用，以及webpack打包上线的详细步骤。通过npm安装依赖，配置webpack，最后执行npm run build生成打包文件，上线只需将public文件夹上传至服务器。

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

webpack+antd+fetch 通讯

1. 引入安装fetch

import "whatwg-fetch"
import "es6-promise"

2. 在utils中配置fetch文件，定义了一个get请求和post请求的方法，因为内部是promise封装的所以返回的是一个promise对象，通过.then接收

具体代码

get 方法

export function get(url){
    return  fetch(url,{
        method:'GET',
        headers:{
            'Accept':'application/json,text/plain,*/*',
            'Content-Type':'application/x-www-form-urlencoded',
       },
       cache:"default",
       mode: "cors"  
    }).then(function(response){
         // 捕获状态码和json数据
        if(response.status==200){
            // response 是浏览器请求报文， response.json()是经过json序列号后，接口返回的内容
            return response.json()
        }
    }).then(f