Axios传值的几种方式

axios基本使用

默认是get请求

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

使用get方式进行无参请求

     axios({         url:'http://localhost:8080/get/getAll',         method:'get'     }).then(res=>{         console.log(res.data.data)     })  @GetMapping("/get/getAll")     public ResResult getAllUser(){         List list = userService.list();         return ResResult.okResult(list);     }

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

 

     axios({         url:'http://localhost:8080/get/1',         method:'get'     }).then(res=>{         console.log(res.data.data)     })  后端接口 @GetMapping("/get/{id}") public ResResult getUserById(@PathVariable("id") Long id){         User user = userService.getById(id);         return ResResult.okResult(user); }

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

     axios({         url:'http://localhost:8080/get?id=1',         method:'get'     }).then(res=>{         console.log(res.data.data)     })  后端接口 @GetMapping("/get")     public ResResult getUserByIds(@RequestParam("id") Long id){         User user = userService.getById(id);         return ResResult.okResult(user); }

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

     axios({         url:'http://localhost:8080/get',         params:{             id:'2'         },         method:'get'     }).then(res=>{         console.log(res.data.data)     }) 后端接口@GetMapping("/get")    public ResResult getUserByIds(@RequestParam("id") Long id){        User user = userService.getById(id);        return ResResult.okResult(user);}

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

    axios({        url:'http://localhost:8080/get',        params:{            id:'2',            username:'swx'        },        method:'get'    }).then(res=>{        console.log(res.data.data)    })后端接口@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格式数据

    axios({        url:'http://localhost:8080/post/test',        data:{            'username':'swx'        },        method:'post'    }).then(res=>{        console.log(res.data.data)    })后端接口@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无参请求

    axios.get('http://localhost:8080/get/getAll').then(res=>{        console.log(res.data.data)    }).catch(err=>{        console.log('timeout')        console.log(err)    })

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

    axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{        console.log(res.data.data)    }).catch(err=>{        console.log('timeout')        console.log(err)    })

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

    axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{        console.log(res.data.data)    }).catch(err=>{        console.log('timeout')        console.log(err)    })也可以一下方式，但是后端要加@RequestBody注解    axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{        console.log(res.data.data)    }).catch(err=>{        console.log('timeout')        console.log(err)    })

axios并发请求

    axios.all([        axios.get('http://localhost:8080/get/getAll'),        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})    ]).then(res=>{        //返回的是数组，请求成功返回的数组        console.log(res[0].data.data),        console.log(res[1].data.data)    }).catch(err=>{        console.log(err)    })后端接口@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.all([        axios.get('http://localhost:8080/get/getAll'),        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})    ]).then(        //高端一些        axios.spread((res1,res2)=>{            console.log(res1.data.data),            console.log(res2.data.data)        })    ).catch(err=>{        console.log(err)    })

axios全局配置

    axios.defaults.baseURL='http://localhost:8080'; //全局配置属性    axios.defaults.timeout=5000; //设置超时时间    //发送请求    axios.get('get/getAll').then(res=>{        console.log(res.data.data)    });    axios.post('post/getAll').then(res=>{        console.log(res.data.data)    });

axios实例 

    //创建实例    let request = axios.create({        baseURL:'http://localhost:8080',        timeout:5000    });    //使用实例    request({        url:'get/getAll'    }).then(res=>{        console.log(res.data.data)    });    request({        url:'post/getAll',        method:'post'    }).then(res=>{        console.log(res.data.data)    })

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