Axios请求方式

╰+哭是因爲堅強的太久メ 2022-10-10 12:46 156阅读 0赞

## Axios请求方式 ##

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

使用cdn的方式引入axios.js

使用这个注解可以使前端和后端跨域请求

@CrossOrigin

### 详细介绍 ###

then成功的回调函数

catch请求失败的异常

params 参数

data请求体数据

axios中文网：https://www.kancloud.cn/yunye/axios/234845

### GET请求 ###

方式一：

axios({ 
      method: 'get',
      url: 'http://127.0.0.1:8081/getAxios',
      data: { 
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    })
      .then(function(response) { 
        console.log(response);
      })
      .catch(function(error) { 
        console.log(error);
      });

java后台接收

@ResponseBody
    @RequestMapping(value = "/postAxios3", method = RequestMethod.POST)
    public Object postAxios3(@RequestBody Map<String, Object> maps) { 
    	Map<String, Object> map = new HashMap<>();
        map.put("firstName", maps.get("firstName"));
        map.put("lastName", maps.get("lastName"));
       	return map;
    }

方式二：

axios.get('http://127.0.0.1:8081/getAxios', { 
        params: { 
          firstName: 'Fred',
          lastName: 'Flintstone'
        }
      })
      .then(function(response) { 
        console.log(response);
      })
      .catch(function(error) { 
        console.log(error);
      });

java后台接收

@RequestMapping(value = "/getAxios", method = RequestMethod.GET)
    public String getAxios(String firstName, String lastName) { 
        return "成功=" + firstName + ":" + lastName;
    }

### POST请求 ###

方式一：

axios({ 
      method: 'post',
      url: 'http://127.0.0.1:8081/postAxios',
      data: { 
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    })
      .then(function(response) { 
        console.log(response);
      })
      .catch(function(error) { 
        console.log(error);
      });

方式二：

java后台接收

@ResponseBody
    @RequestMapping(value = "/postAxios", method = RequestMethod.POST)
    public Object postAxios3(@RequestBody Map<String, Object> maps) { 
    	Map<String, Object> map = new HashMap<>();
        map.put("firstName", maps.get("firstName"));
        map.put("lastName", maps.get("lastName"));
       	return map;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdUR1a2Ux_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdUR1a2Ux_size_16_color_FFFFFF_t_70]: /images/20221005/79c12bdabf5d41889257808f887fdda8.png