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)
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...