axios的使用

参考链接

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是必须的，其余可以没有。

写在前面：

1. 日常常用的参数传递，下面的自用基于这两种形式

   • Request Payload 传递对象

     {"key":"value","key":"value"...}

   • Form Data 形式

     key=value&key=value&key=value...

2. axios的两种请求方式GET，POST，默认是GET，其实这点上面已经提到了

3. 再往下就得提到 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

  //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，详细看官网文档

写在最后

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