05-08 09:20 阅读 127

axios的使用

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修饰。

来源：https://www.cnblogs.com/xp-thebest/p/14746224.html

服务器评测 http://www.cncsto.com/