axios传递参数的使用

  • axios传递参数的使用已关闭评论
  • 73 次浏览
  • A+
所属分类:Web前端
摘要

  今天在学习elasticsearch时,遇到一个问题:项目中前端采用的是Vue2+axios,后端的接口采用Restful风格来接收:

  今天在学习elasticsearch时,遇到一个问题:项目中前端采用的是Vue2+axios,后端的接口采用Restful风格来接收:

关于Resultful风格:

  1. GET(SELECT):从服务器取出资源(一项或多项);

  2. POST(CREATE):在服务器新建一个资源;

  3. PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源);

  4. PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性);

  5. DELETE(DELETE):从服务器删除资源;

  6. HEAD:获取资源的元数据;

  7. OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。

前端代码
//axios.post("/hotel/list", params)//这是采用的post方式(刚开始是这样的,我将post改为get后,便会报错)
axios.get("/hotel/list",{//这是采用get方式,这两种方式最后结果都正确,后面会说具体怎么做的             params:params         })           .then(resp => {             this.hotels = resp.data.hotels;             this.total = resp.data.total;             this.totalPage = Math.floor((this.total + 5 - 1) / 5);             if (location) {               this.setMapCenter(location);             } else if(this.hotels && this.hotels.length > 0){               this.setMapCenter(this.hotels[0].location);             }             this.initMarker();           })           .catch(err => {             console.log(err)             this.hotels = []           })

  可以看到一般要查询数据时是采用GetMapping接收,但是在学习的源码中发现,查询时向后端的请求时POST方式,后端也是PostMapping接收参数,当我将POST方法改为GET方法时又会报空指针的错误(前端传递的参数后端没有接收到)为什么改个传递方式后,结果就传不进去了?随后我便查找了axios的官网

请求方式别名 为了方便起见,已经为所有支持的请求方法提供了别名。  axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) 

  可以看到,axios.post("/hotel/list", params),Post方法是可以直接传参的,但是Get方法却不能直接传参,需要在配置中(config)配置。

  具体的传递参数方法案例如下:

一、Get请求

  1.1基础类型接收,名字对应就可以

// method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'GET',     params: params   }) }   // 后台 @GetMapping("/test") public Result test(Long id, String name) {     return Res.ok(); } 

  1.2使用Map接收,需要添加 RequestParam 注解

// method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'GET',     params: params   }) }   // 后台 @GetMapping("/test") public Result test(@RequestParam Map<String, Object> map) {     return Res.ok(); } 

  1.3实体类接收

// 实体类 @Data public class TestEntity {     Long id;     String name; }   // method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'GET',	     params: params   }) }   // 后台 @GetMapping("/test") public Result test(TestEntity testEntity) {     return Res.ok(); } 

  二、Post请求

  2.1基础类型接收,名称对应即可

// method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'POST',     params: params   }) }   // 后台 @PostMapping("/test") public Result test(Long id, String name) {     return Res.ok(); } 

  2.2使用map接收

// method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'POST',     params: params   }) }   // 后台 @PostMapping("/test") public Result test(@RequestParam Map<String, Object> map) {     return Res.ok(); } 

  2.3使用实体类接收(params传递参数)

// 实体类 @Data public class TestEntity {     Long id;     String name; }   // method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'POST',	     params: params   }) }   // 后台 @PostMapping("/test") public Result test(TestEntity testEntity) {     return Res.ok(); } 

  2.4实体类接收(data传递参数)

// 实体类 @Data public class TestEntity {     Long id;     String name; }   // method const params = {     id: '123456789',     name: '张三' } test(params)   // api export function test (params) {   return axios({     url: url,     method: 'POST',	     data: params   }) }   @PostMapping("/test") public Result test(@RequestBody TestEntity testEntity) {     return Res.ok(); } 

总结
总体来说,只要使用 params get与post请求基本是一样使用的,如果参数名与传递名称不一致,需要使用@RequestParam修饰.

若使用Map接收参数,必须使用@RequestParam修饰。但是如果想传list类型的数据,需要使用单独的方法处理。

若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解@RequestBody进行修饰