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