Axios传值的几种方式

axios基本使用

默认是get请求

注意：get请求无请求体，可以有body,但是不建议带

使用get方式进行无参请求

 @GetMapping("/get/getAll")
     public ResResult getAllUser(){
         List list = userService.list();
         return ResResult.okResult(list);
     }

 使用get方式请求，参数值直接放在路径中

 

 后端接口
 @GetMapping("/get/{id}")
 public ResResult getUserById(@PathVariable("id") Long id){
         User user = userService.getById(id);
         return ResResult.okResult(user);
 }

 使用get方式请求，参数拼接在路径中：方式① 

 后端接口
 @GetMapping("/get")
     public ResResult getUserByIds(@RequestParam("id") Long id){
         User user = userService.getById(id);
         return ResResult.okResult(user);
 }

 使用get方式请求，参数拼接在路径中：方式②

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

使用get方式请求，拼接多个参数在路径中：方式③ 

后端接口
@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
        LambdaQueryWrapper wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,username);
        wrapper.eq(User::getId,id);
        User user = userService.getOne(wrapper);
        return ResResult.okResult(user);
 }

 post请求接收json格式数据

后端接口
@PostMapping("/post/test")
    public ResResult getUserByIdPostTest(@RequestBody User user){
        LambdaQueryWrapper wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,user.getUsername());
        User users = userService.getOne(wrapper);
        return ResResult.okResult(users);
    }

3、请求简写方式&请求失败处理 

get无参请求

get有参请求,post方式不可以这样请求

 post有参请求，以json格式请求

也可以一下方式，但是后端要加@RequestBody注解

axios并发请求

后端接口
@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List list = userService.list();
        return ResResult.okResult(list);
    }

@GetMapping("/get/get")
    public ResResult getUserByIdt(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
    }

 方式2：使用spread方法处理返回的数组

axios全局配置

axios实例 

Axios各种参数携带方式详解 - 知乎 (zhihu.com)