Axios

What is

Axios is promise based HTTP client for the browser and node.js.

Promise

Installing

  • Using npm:
  [plaintext]
1
$ npm install axios
  • Using bower:
  [plaintext]
1
$ bower install axios
  • Using cdn:
  [javascript]
1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Example

GET

  [javascript]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Make a request for a user with a given ID axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the request above could also be done as axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

POST

  [javascript]
1
2
3
4
5
6
7
8
9
10
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

注意

实际使用时,axios 使用post方式传递参数,后端接受不到

  • main.js 里 设置配置,修改 Content-Type
  [javascript]
1
2
3
import axios from 'axios'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; Vue.prototype.$axios = axios;
  • 在组件vue里
  [javascript]
1
2
3
4
5
6
7
8
9
10
11
const url ='http://****你的接口****'; var params = new URLSearchParams(); params.append('key1', 'value1'); //你要传给后台的参数值 key/value params.append('key2', 'value2'); params.append('key3', 'value3'); this.$axios({ method: 'post', url:url, data:params }).then((res)=>{ });

实际问题

post 传递 json

前端传递参数 json,但是因为 json 中包含特殊字符 ',导致传递失败。

去网上查询,说是使用 encodeURIComponent,但是实际测试无效,后来验证使用 formdata

FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。

其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。

如果表单 enctyp e属性设为 multipart/form-data,则会使用表单的 submit() 方法来发送数据,从而,发送数据具有同样形式。

  • 实例
  [js]
1
2
3
4
5
6
7
8
let formdata = new FormData(); formdata.append('partyIds', partyIds); API.pms.traderList(formdata).then(res => { this.counterTrader = res.data; }).catch(res => { this.$Message.error('获取对手方交易员出错!'); });

其中交易员列表函数为:

  [js]
1
2
3
4
5
6
7
export function traderList(params) { return request({ url: '/pms/trader/traders', method: 'post', data: params }); }

post 请求后端接收的值为空

场景

axios 发送 post 请求,后端接收到了,但是属性值都是空的。

后端

  [java]
1
2
3
4
5
6
7
@RequestMapping("/add") @ResponseBody public BaseResp add(final User user) { user.setUserId(IdWorker.get32UUID()); userService.insert(user); return RespUtil.success(); }

前端

  [js]
1
2
3
4
5
6
7
8
9
10
var user = { userId: this.addForm.userId, userName: this.addForm.userName, remark: this.addForm.remark } axios.post('/user/add', user).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });

解决方案

看了一篇比较详细的介绍:axios 发 post 请求,后端接收不到参数的解决方案

尝试了几种引入 qs 的方案都失败了,于是采用比较直接的方式,后端加一个 @RequestBody 注解。

  [java]
1
2
3
4
5
6
7
@RequestMapping("/add") @ResponseBody public BaseResp add(@RequestBody final User user) { user.setUserId(IdWorker.get32UUID()); userService.insert(user); return RespUtil.success(); }

其他保持不变,可以正常接收。

this 不指向 vue 的问题

在请求回调中,this 实际上是不指向 vue 的,这导致了很多问题。

解决方案

请求之前,使用 _this 保存 vue 的 this 信息。

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
//axios 中的 this 并不指向 vue var _this = this; axios.post('/user/list', req).then(function (response) { if(response.data.respCode === '0000') { _this.tableData = response.data.list; _this.page.total = response.data.total; } else { ELEMENT.Message.error(response.data.respMessage); } }).catch(function (error) { ELEMENT.Message.error("请求失败"); console.log(error); });

拓展阅读

QS

参考资料

https://blog.csdn.net/qq_27409289/article/details/71156459

https://blog.csdn.net/jluzh04140717/article/details/70193932

axios 发 post 请求,后端接收不到参数的解决方案