Day55 Axios的请求***-白红宇

Day55 Axios的请求***

阅读量：805 次

发布时间：2019-03-25

本文共 2382 字，大约阅读时间需要 7 分钟。

Axios 是一个适用于浏览器和 Node.js 的基于 Promise 的 HTTP 库，相较于以前的 vue-resource，Axios 在 2.0 版本后引入了更高级的功能和更灵活的接口。它能够处理 XML HttpRequest 以及 JSONP 请求，并且在处理响应时提供了更强大的灵活性。

在以前的 vue-resource 中，开发者可以使用 XMLHttp Request 或 JSONP 来执行 Web 请求并处理响应。然而，Axios 的出现标志着一个重要的改进。Axios 不仅保留了传统的 HTTP 请求方式，还引入了 Promise 的支持，使得代码更加简洁且易于管理。

Axios 的基本用法

在使用 Axios 之前，首先需要从 CDN 或 npm 下载安装。安装完成后，可以通过以下方式进行基本操作：

引入 Axios

在项目中引入 Axios，可通过以下方式完成：

或者通过 npm安装：

npm install axios --save

发送 GET 请求

使用 axios.get 方法来发送 GET 请求。例如，可以用以下方式获取指定 URL 的数据：

axios.get('/api/users', {  params: {    id: 123  }}).then(response => {  console.log('响应数据:', response.data);}).catch(error => {  console.log('请求失败：', error.message);});

发送 POST 请求

暮发送 POST 请求时，可以使用 axios.post 方法。需要注意的是，后台需要接收一个 JSON 格式的请求体：

axios.post('/api/users', {  id: 123,  name: 'John Doe'}).then(response => {  console.log('响应状态:', response.status);  console.log('响应内容:', response.data);}).catch(error => {  console.log('请求失败：', error.message);});

需要注意的是，在后台接收请求时，必须在控制器方法上使用 @RequestBody 注解以接收完整的 JSON 对象。

详细解释

Axios 的优势

相比于传统的 XMLHttpRequest，Axios 提供了许多便利的方法和特性：

基于 Promise 的异步编码
Axios 采用了 Promise 的方式处理请求，通过 .then() 和 .catch() 方法可以在并发处理多个请求时保持代码的简洁性。

支持 HTTP 方法
含 GET、POST、PUT、DELETE 等多种 HTTP 方法，不仅限于 GET 和 POST。

可配置性强
можно 配置请求的 headers、参数等选项，提供了高度的定制化能力。

Vue.js 实例

一个典型的 Vue.js 项目示例：

后台 API 开发

在 Spring Boot 项目中，提供以下 RESTful API：

@RestController@RequestMapping("/users")public class UserController {    @RequestMapping(path = "/find.do", method = {RequestMethod.GET})    public User getCurrentUser(@RequestBody User user) {        System.out.println("获取用户信息：" + user.getId());        User foundUser = new User();        foundUser.setId(user.getId());        foundUser.setUsername("jack" + user.getId());        return foundUser;    }    @RequestMapping(path = "/save.do", method = {RequestMethod.POST})    public User saveUser(@RequestBody User user) {        System.out.println("保存用户：" + user.getId());        User savedUser = new User();        savedUser.setId(user.getId());        savedUser.setUsername("jack" + user.getId());        return savedUser;    }}