参考链接

https://segmentfault.com/a/1190000018774494

http://blog.itblood.com/447.html

https://blog.csdn.net/linglingzi001/article/details/108349261

https://www.cnblogs.com/dw039/p/11104628.html

https://www.cnblogs.com/somliy/p/13189485.html

https://blog.csdn.net/u012443286/article/details/88560240

http://www.axios-js.com/zh-cn/docs/

axios使用

官网案例

先来看看官方给出的例子，挺简单的...

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

带配置的axios

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

//以get为例
axios.get('/test', {
    params: {
        id: 123
    },
   timeout: 1000,
  	...//其他相关配置
})

//以post为例
axios.post('/test', {
    id: 123
},{
   timeout: 1000,
    ...//其他相关配置
})

配置项很多，可以去官方文档详细配置查看，但是注意：配置中url是必须的，其余可以没有。

写在前面：

日常常用的参数传递，下面的自用基于这两种形式
- Request Payload 传递对象
  {"key":"value","key":"value"...}
- Form Data 形式
  key=value&key=value&key=value...
axios的两种请求方式GET，POST，默认是GET，其实这点上面已经提到了
再往下就得提到 axios 两种传参形式 params 与data
- params是添加到url的请求字符串中的，一般用于get请求。
- data是添加到请求体body中的，一般用于post请求。

注意：post请求也可以使用params方式传值，但是get不能使用data方式传参

例子

GET

this.$axios.get("test", {params:{name:"carlget1", password:"password"}})
  .then(function(res){
    console.log( res );
  })
  .catch(function(err){
    console.log( err );
  });

// 后台 用具体参数接收
@GetMapping("/test")
public String test(String name, String password) {
    return "ok";
}

// 后台也可以用 对象形式接收
@Data
public class User {
    String name;
    String password;
}
@GetMapping("/test")
public String test(User user) {
    return "ok";
}

注意：get请求不允许传递List，需要使用qs插件或者配置axios，具体参考链接

POST

传参形式默认data，默认参数格式为json，所以后端默认接收方式默认是对象形式

this.$axios
  .post('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
  })

@PostMapping(value = "/login")
@ResponseBody
public String login(@RequestBody User user){
    User user1 = Service.Find(user);
    JSONObject object = new JSONObject();
    return object;
}

后端想要接受Form Data数据？

方法1：直接拼接成字符串传递

var data = 'name=123&val=456';
axios.post('/', data)

方法2：是用parms的方式传参（配置的时候修改即可），同GET

this.$axios
  .post('/login', { parms:{
    username: this.loginForm.username,
    password: this.loginForm.password
  }})

方法3：不想用parms方式传参，请看下面两种方法，本质都是通过序列化的方式进行对象的 k=v 格式化

//qs是axios自带的 使用之前记得引入一下 impost qs from 'qs'
this.$axios
    .post('/login', qs.stringify(data));

URLSearchParams
```
var param = new URLSearchParams();
param.append('username', 'admin'),
param.append('password', 'admin'),
this.$axios
    .post('/login', param);
```
如要传递Form Data格式的数据推荐使用parms或者qs的方式，URLSearchParams这种会显得冗长，而且有的浏览器可能出问题，可以使用官网推荐的transformRequest，详细看官网文档

写在最后

后端注解@RequsetParam 获取 k=v 格式的参数，get/post都可以。
@RequestBody 获取payload中的数据，即一个对象。
不写注解时，默认@RequsetParam机制，并且要求前端传递的参数名称与后端定义的参数名称一致，否则无法获取到数据。
若使用 data 传递参数，必须使用一个实体类接收参数，而且需要添加注解@RequestBody进行修饰。
若使用 Map 接收参数，必须使用@RequestParam修饰。

noor9

axios的使用