常见http请求交互

发表于 | 分类于

总结了下前端与后端交互常用的发请求方式，环境fetch+eggjs

json格式

后端node可以通过ctx.request.body拿到前端发送的JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let meta = {
  method: "POST",
  credentials: 'include',// same-origin、 omit、 include
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(params) //传为json string
};
fetch("http://127.0.0.1:7001/", meta)
  .then(response => response.json())
  .then(responseJson => {
    debugger;
  })
  .catch(error => {
    console.error(error);
  });

form

1
2
3
4
5
6
7
let meta = {
    'method': 'POST',
    'headers': {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    'body': 'a=1&b=2&c=3'//通过qs.stringify({a:1,b:2,c:3})
};

formdata

通常上传功能会使用此类方式。可以通过表单获取一个FormData，也可以直接创建一个，egg可以通过ctx.request.files[]拿到上传的文件，ctx.request.body拿到参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//eggjs
config.multipart = {
    fileSize: '50mb',
    mode: 'file',
    fileExtensions: [ '.xls', '.txt' ], // 扩展几种上传的文件格式
};
//获取表单
var formElement = document.querySelector("form");
var formData = new FormData(formElement);
//新建formData
const fm = new FormData();
fm.append('a', 1);
fm.append('b', 2);
fm.append('c', 3);
let meta = {
    'method': 'POST',
    'headers': {
        'Content-Type': 'multipart/form-data'
    },
    'body': fm
};