- <body>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- </body>
复制代码 axios根本利用
默认是get请求
留意:get请求无请求体,可以有body,但是不建议带
利用get方式举行无参请求
- <script>
- axios({
- url:'http://localhost:8080/get/getAll',
- method:'get'
- }).then(res=>{
- console.log(res.data.data)
- })
- </script>
- @GetMapping("/get/getAll")
- public ResResult getAllUser(){
- List<User> list = userService.list();
- return ResResult.okResult(list);
- }
复制代码 利用get方式请求,参数值直接放在路径中
- <script>
- axios({
- url:'http://localhost:8080/get/1',
- method:'get'
- }).then(res=>{
- console.log(res.data.data)
- })
- </script>
- 后端接口
- @GetMapping("/get/{id}")
- public ResResult getUserById(@PathVariable("id") Long id){
- User user = userService.getById(id);
- return ResResult.okResult(user);
- }
复制代码 利用get方式请求,参数拼接在路径中:方式①
- <script>
- axios({
- url:'http://localhost:8080/get?id=1',
- method:'get'
- }).then(res=>{
- console.log(res.data.data)
- })
- </script>
- 后端接口
- @GetMapping("/get")
- public ResResult getUserByIds(@RequestParam("id") Long id){
- User user = userService.getById(id);
- return ResResult.okResult(user);
- }
复制代码 利用get方式请求,参数拼接在路径中:方式②
- <script>
- axios({
- url:'http://localhost:8080/get',
- params:{
- id:'2'
- },
- method:'get'
- }).then(res=>{
- console.log(res.data.data)
- })
- </script>
- 后端接口
- @GetMapping("/get")
- public ResResult getUserByIds(@RequestParam("id") Long id){
- User user = userService.getById(id);
- return ResResult.okResult(user);
- }
复制代码 利用get方式请求,拼接多个参数在路径中:方式③
- <script>
- axios({
- url:'http://localhost:8080/get',
- params:{
- id:'2',
- username:'swx'
- },
- method:'get'
- }).then(res=>{
- console.log(res.data.data)
- })
- </script>
- 后端接口
- @GetMapping("/get")
- public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
- LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
- wrapper.eq(User::getUsername,username);
- wrapper.eq(User::getId,id);
- User user = userService.getOne(wrapper);
- return ResResult.okResult(user);
- }
复制代码 post请求接收json格式数据
- <script>
- axios({
- url:'http://localhost:8080/post/test',
- data:{
- 'username':'swx'
- },
- method:'post'
- }).then(res=>{
- console.log(res.data.data)
- })
- </script>
- 后端接口
- @PostMapping("/post/test")
- public ResResult getUserByIdPostTest(@RequestBody User user){
- LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
- wrapper.eq(User::getUsername,user.getUsername());
- User users = userService.getOne(wrapper);
- return ResResult.okResult(users);
- }
复制代码 3、请求简写方式&请求失败处理
get无参请求
- <script>
- axios.get('http://localhost:8080/get/getAll').then(res=>{
- console.log(res.data.data)
- }).catch(err=>{
- console.log('timeout')
- console.log(err)
- })
- </script>
复制代码 get有参请求,post方式不可以如许请求
- <script>
- 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)
- })
- </script>
复制代码 post有参请求,以json格式请求
- <script>
- 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)
- })
- </script>
- 也可以一下方式,但是后端要加@RequestBody注解
- <script>
- axios.post('http://localhost:8080/post/test',{username:'swx'}).then(res=>{
- console.log(res.data.data)
- }).catch(err=>{
- console.log('timeout')
- console.log(err)
- })
- </script>
复制代码 axios并发请求
- <script>
- 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)
- })
- </script>
- 后端接口
- @GetMapping("/get/getAll")
- public ResResult getAllUser(){
- List<User> 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方法处理返回的数组
- <script>
- 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)
- })
- </script>
复制代码 axios全局设置
- <script>
- 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)
- });
- </script>
复制代码 axios实例
- <script>
- //创建实例
- 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)
- })
- </script>
复制代码 Axios各种参数携带方式详解 - 知乎 (zhihu.com)
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |