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

我就是我 2021-11-29 14:10 279阅读 0赞

### 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(function(data){
                // data 是得到的结果
            return data     
        }).catch(function(err){
          console.log(err,'err')   // 错误处理
        })   
    }

> post 方法  
> // 发送post请求

export function post(url,paramsObj) {
      return fetch(url,{
            method:'POST',
            mode: "cors", 
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/x-www-form-urlencoded'
            },
            body: objParams(paramsObj)
            // body: "id=26"
        }).then(function(response){
           if(response.status==200){
               return response.json()
           }
       }).then(function(data){
           return data
       }).catch(function(err){
         console.log(err,'err')   // 错误处理
       })
    }

> post 方法参数是body为"id=1&name=lisi"格式，但是我们通过会通过id:1,name:lisi ， json传递 ， 所以要对参数进行处理一下 ， 转化一下格式

objParams=(paramsObj)=>{
       let result="",
       let item;
       for(item in paramsObj){
          result += '&' + item + '=' +  encodeURIComponent(paramsObj[item])
       }
       if(result){
         result=  result.substr(1)
       }
       return result
    }

###### 3. 调用 ， 将fetch.js 在页面中的使用，引用进来后调用 ######

> 处理 get 请求 ，例子： 对query参数处理，可以安装npm i stringify --save , 进行处理（id=1&lisi=2）格式，  
> 通过.then进行接收返回的结果

//查询列表
         initList=(params)=>{
            const list = get(`39.96.71.193:3390/api/blog/list?${stringify(params)}`)
             list.then(res=>{
               this.setState({
                 data:res.data||[]
               })
            })
        }

> 处理 post 请求 ， 例子： 删除为例 ， 将json参数传入

```
    
       // 删除
      handleDelete=(id)=>{
        const paramsObj ={
           id,
           author:'lisi'
        }
        const result = post(`39.96.71.193:3390/api/blog/del`,paramsObj)
        result.then(res=>{
          console.log(res.data,'111')
          if(res.data){
            message.success('删除成功');
            this.initList()
          }else{
            message.error('删除失败');
          }
        })
      }

###### 4.webpack打包上线 ######

安装依赖npm install webpack-cli --save-dev  
在package.json中加入

"scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "server": "webpack-dev-server --open",
       "dev": "webpack --mode deveplopment",
       "build": "webpack --mode production"
     }

执行 npm run build ， 就会生成public的打包后的文件 , public 里面有index.html和bundle.js 两个文件，此时可以直接访问index.html 来访问网页了， 上线时只需要把public放到服务器即可

###### 5. 完成后的界面 ######

![img1][]

![img2][]

> 链接地址：  
> [网页地址][Link 1]

> github 地址：  
> [github][]

[img1]: /images/20211129/ebebf7dd698a4447b440feff11b38a84.png
[img2]: /images/20211129/6be3fa319e07426c914a5f02638b0740.png
[Link 1]: https://erp.rockshang.cn/
[github]: https://github.com/s2265681/component