axios get | post传参方法整理_axios post传参

---

前言

最近更改Node接口时遇到了一些问题, 比如前端以何种方式传参, 后端用何种方式接收等等…
今天花了一小段事件测试了一下, 整理一下结果吧.

---

一、GET

后端接收query

前端传params.
前端:

axios({
  method: "get",
  url: "http://localhost:3000/getArticleById",
  params: {
    article_id: 8,
  },
}).then((res) => {
  console.log(res);
});
1
2
3
4
5
6
7
8
9

后端:

app.post('/getArticleById', (req, res, next) => {
  api.getArticleById(req, res, next);
})
1
2
3

getArticleById(req, res, next) {
  console.log("body:" + req.body.article_id)
  console.log("params:" + req.params.article_id);
  console.log("query:" + req.query.article_id);
  return;
},
1
2
3
4
5
6

后端输出:

---

二、POST

1.后端接收body

前端传data.
前端:

axios({
  method: "post",
  url: "http://localhost:3000/getArticleById",
  data: {
    article_id: 8,
  },
}).then((res) => {
  console.log(res);
});

/* 
等同于
axios.post("http://localhost:3000/getArticleById", {
  article_id: 8
}).then()
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

后端:

app.post('/getArticleById', (req, res, next) => {  //文章页文章请求
  api.getArticleById(req, res, next);
})
1
2
3

getArticleById(req, res, next) {
  console.log("body:" + req.body.article_id)
  console.log("params:" + req.params.article_id);
  console.log("query:" + req.query.article_id);
  return;
},
1
2
3
4
5
6

后端输出:

---

2.后端接收query

前端传params.
前端:

axios({
  method: "post",
  url: "http://localhost:3000/getArticleById",
  params: {
    article_id: 8,
  },
}).then((res) => {
  console.log(res);
});
1
2
3
4
5
6
7
8
9

后端:

app.post('/getArticleById', (req, res, next) => {  //文章页文章请求
  api.getArticleById(req, res, next);
})
1
2
3

getArticleById(req, res, next) {
  console.log("body:" + req.body.article_id)
  console.log("params:" + req.params.article_id);
  console.log("query:" + req.query.article_id);
  return;
},
1
2
3
4
5
6

后端输出:

---

3.前端传params

这个方法来自于一位大佬, 传送门: post像get一样使用params传参
前端:

axios({
  method: 'post',
  url: "http://localhost:3000/getArticleById",
  params: {
    article_id: 8
  }
}).then((res) => {
  console.log(res);
})
/*
等同于
axios
  .post("http://localhost:3000/getArticleById", null, {
    params: { article_id: 8 },
  })
  .then((res) => {
    console.log(res);
  });
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

后端:

app.post('/getArticleById', (req, res, next) => {  //文章页文章请求
  api.getArticleById(req, res, next);
})
1
2
3

getArticleById(req, res, next) {
  console.log("body:" + req.body.article_id)
  console.log("params:" + req.params.article_id);
  console.log("query:" + req.query.article_id);
  return;
},
1
2
3
4
5
6

后端输出:

---

总结

复习一波, 以后遇到别的需求再回来补全…