Vue使用axios实现Ajax哀求

1、什么是 axios

在实际开发过程中，欣赏器通常需要和服务器端举行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后，官方保举使用 axios 来实现 Ajax 哀求。axios 是一个基于 promise 的 HTTP 客户端。
   关于 promise 的详细介绍，请点击欣赏文章：《ECMAScript6语法：Promise》
  axios 的主要特点如下：

• 从欣赏器中创建 XMLHttpRequest。
  
• 从 node.js 发出 HTTP 哀求。
  
• 支持 Promise API。
  
• 拦截哀求和相应。
  
• 转换哀求和相应数据。
  
• 取消哀求。
  
• 自动转换JSON数据。
  
• 客户端支持防止CSRF/XSRF。
  

   官方文档：《Axios中文文档》
  
2、安装 axios

假如在项目中使用 axios，则可以使用 npm 方式举行安装。在命令提示符窗口中输入如下命令：

1. npm install axios --save

复制代码

大概使用 yarn 安装，命令如下：

1. yarn add axios –save

复制代码

3、axios 的语法

在实际项目开发中，前端页面中所需的数据通常要从服务器端获取，这就需要实现当地与服务器端的通信，Vue 使用 axios 实现 Ajax 哀求。
语法格式和参数说明：

1. axios({
2.     url: '',             //请求的路径
3.     method: 'GET',       //请求的方式，默认为GET
4.     params: {},          //GET请求方式：传递的参数
5.     data: {},            //POST请求方式：传递的参数
6.     headers: {},         //自定义请求头
7.     timeout: 1000,       //请求超时时间（毫秒）
8.     responseType: 'JSON' //响应的数据类型，默认为JSON
9. }).then(
10.     // then() 函数：处理请求成功的回调函数
11.     function (response) {
12.         console.log("返回的数据", response.data);
13.     }
14. ).catch(function (error) {
15.     // catch() 函数：处理请求失败的回调函数
16.     console.log("发生异常：" + error.message);
17. });

复制代码

4、解决跨域问题

假如 Vue 前端应用哀求后端 API 服务器，出现跨域问题（CORS），如下图：

解决方法：在 Vue 项目中，打开 vue.config.js 配置文件，在配置文件中使用代理解决跨域问题。

1. const { defineConfig } = require('@vue/cli-service')
2. module.exports = defineConfig({
3.   transpileDependencies: true,
4.   devServer:{
5.     proxy: 'http://localhost:8085',  //使用代理，解决跨域问题
6.   }
7. })

复制代码

  详情的解决方法，请点击欣赏文章：《Vue使用代理方式解决跨域问题》
  
5、综合实例

【实例】使用 axios 实现 Ajax 哀求，实现用户信息的查询和新增功能。实行结果如下图：

（1）使用 Java、SpringBoot 创建一个后端项目，编写 UserController.java 用户信息控制器，实现 API 接口。

1. package com.pjb.pm.controller;
3. import com.pjb.pm.entity.UserInfo;
4. import org.springframework.web.bind.annotation.*;
6. /**
7. * 用户信息控制器
8. * @author pan_junbiao
9. **/
10. @RestController
11. @RequestMapping("/user")
12. //@CrossOrigin //解决跨域问题
13. public class UserController
14. {
15.     /**
16.      * 获取用户信息
17.      */
18.     @RequestMapping(value = "/getUserInfo/{id}", method = RequestMethod.GET)
19.     public UserInfo getUserInfo(@PathVariable("id") Long userId)
20.     {
21.         //模拟用户查询功能
22.         UserInfo userInfo = new UserInfo();
23.         userInfo.setUserId(userId);
24.         userInfo.setUserName("pan_junbiao的博客");
25.         userInfo.setSex("男");
26.         userInfo.setAge(36);
27.         userInfo.setBlogName("您好，欢迎访问 pan_junbiao的博客");
28.         userInfo.setBlogUrl("https://blog.csdn.net/pan_junbiao");
29.         return userInfo;
30.     }
32.     /**
33.      * 新增用户信息
34.      */
35.     @RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST)
36.     public boolean saveUserInfo(@RequestBody UserInfo userInfo)
37.     {
38.         //忽略相关功能...
39.         return true;
40.     }
41. }

复制代码

（2）在 Vue 项目中，创建 UserInfo.vue 组件。

1. <template>
2.     <fieldset>
3.         <legend>用户信息</legend>
4.         <p>用户名称：<input type="text" v-model="userInfo.userName" /></p>
5.         <p>用户年龄：<input type="text" v-model="userInfo.age" /></p>
6.         <p>用户性别：<input id="male" type="radio" value="男" v-model="userInfo.sex" />
7.             <label for="male">男</label>
8.             <input id="female" type="radio" value="女" v-model="userInfo.sex" />
9.             <label for="female">女</label>
10.         </p>
11.         <p>博客信息：<input type="text" v-model="userInfo.blogName" /></p>
12.         <p>博客地址：<input type="text" v-model="userInfo.blogUrl" /></p>
13.         <button @click="getUserInfo(1)">查询用户</button>
14.         <button @click="saveUserInfo">新增用户</button>
15.     </fieldset>
16. </template>
18. <script setup>
19. //导入axios
20. import axios from 'axios';
22. import { ref } from 'vue';
24. //注意：这里使用 ref()，不要使用 reactive()，否则重新赋值后，响应式状态就缺失了
25. let userInfo = ref({});
27. //获取用户信息
28. function getUserInfo(userId) {
29.     //使用 axios 的 GET 请求（写法一）
30.     axios({
31.         method: 'GET',
32.         url: `/user/getUserInfo/${userId}`
33.     }).then(
34.         function (response) {
35.             userInfo.value = response.data;
36.         }
37.     ).catch(function (error) {
38.         alert("发生异常：" + error.message);
39.     });
40. }
42. //新增用户信息
43. function saveUserInfo() {
44.     //使用 axios 的 POST 请求（写法二）
45.     let promise = axios({
46.         method: 'POST',
47.         url: `/user/saveUserInfo`,
48.         data: userInfo.value
49.     });
51.     //处理请求成功的回调函数
52.     promise.then(
53.         function (response) {
54.             if (response) {
55.                 alert("操作成功");
56.             } else {
57.                 alert("操作失败");
58.             }
59.         }
60.     ).catch(function (error) {
61.         alert("发生异常：" + error.message);
62.     });
63. }
65. </script>
67. <!-- CSS样式 -->
68. <style scoped>
69. input[type="text"] {
70.     width: 300px;
71.     padding: 3px;
72.     font-size: 16px;
73. }
75. button {
76.     margin-right: 10px;
77. }
78. </style>

复制代码

实行结果：
（1）查询用户信息：

（2）新增用户信息：

6、axios 的二次封装（高级应用）

在项目中，axios 举行二次封装可以更加方便的使用 Ajax 哀求，提高代码复用性和维护性。同时可以封装统一的哀求与相应拦截处理。
   axios 的二次封装，请点击欣赏文章：《Vue使用axios二次封装》
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。