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 方式举行安装。在命令提示符窗口中输入如下命令：
npm install axios --save 大概使用 yarn 安装，命令如下：
yarn add axios –save
3、axios 的语法
在实际项目开发中，前端页面中所需的数据通常要从服务器端获取，这就需要实现当地与服务器端的通信，Vue 使用 axios 实现 Ajax 哀求。
语法格式和参数说明：
axios({
url: '', //请求的路径
method: 'GET', //请求的方式，默认为GET
params: {}, //GET请求方式：传递的参数
data: {}, //POST请求方式：传递的参数
headers: {}, //自定义请求头
timeout: 1000, //请求超时时间（毫秒）
responseType: 'JSON' //响应的数据类型，默认为JSON
}).then(
// then() 函数：处理请求成功的回调函数
function (response) {
console.log("返回的数据", response.data);
}
).catch(function (error) {
// catch() 函数：处理请求失败的回调函数
console.log("发生异常：" + error.message);
});
4、解决跨域问题
假如 Vue 前端应用哀求后端 API 服务器，出现跨域问题（CORS），如下图：
https://i-blog.csdnimg.cn/direct/968f5b3f1b5a47a0a9d64b42570bfc6f.png
解决方法：在 Vue 项目中，打开 vue.config.js 配置文件，在配置文件中使用代理解决跨域问题。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy: 'http://localhost:8085',//使用代理，解决跨域问题
}
}) 详情的解决方法，请点击欣赏文章：《Vue使用代理方式解决跨域问题》
5、综合实例
【实例】使用 axios 实现 Ajax 哀求，实现用户信息的查询和新增功能。实行结果如下图：
https://i-blog.csdnimg.cn/direct/0f3ba5d5fa6f4bf587788448495673cd.png
（1）使用 Java、SpringBoot 创建一个后端项目，编写 UserController.java 用户信息控制器，实现 API 接口。
package com.pjb.pm.controller;
import com.pjb.pm.entity.UserInfo;
import org.springframework.web.bind.annotation.*;
/**
* 用户信息控制器
* @author pan_junbiao
**/
@RestController
@RequestMapping("/user")
//@CrossOrigin //解决跨域问题
public class UserController
{
/**
* 获取用户信息
*/
@RequestMapping(value = "/getUserInfo/{id}", method = RequestMethod.GET)
public UserInfo getUserInfo(@PathVariable("id") Long userId)
{
//模拟用户查询功能
UserInfo userInfo = new UserInfo();
userInfo.setUserId(userId);
userInfo.setUserName("pan_junbiao的博客");
userInfo.setSex("男");
userInfo.setAge(36);
userInfo.setBlogName("您好，欢迎访问 pan_junbiao的博客");
userInfo.setBlogUrl("https://blog.csdn.net/pan_junbiao");
return userInfo;
}
/**
* 新增用户信息
*/
@RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST)
public boolean saveUserInfo(@RequestBody UserInfo userInfo)
{
//忽略相关功能...
return true;
}
} （2）在 Vue 项目中，创建 UserInfo.vue 组件。
<template>
<fieldset>
<legend>用户信息</legend>
<p>用户名称：<input type="text" v-model="userInfo.userName" /></p>
<p>用户年龄：<input type="text" v-model="userInfo.age" /></p>
<p>用户性别：<input id="male" type="radio" value="男" v-model="userInfo.sex" />
<label for="male">男</label>
<input id="female" type="radio" value="女" v-model="userInfo.sex" />
<label for="female">女</label>
</p>
<p>博客信息：<input type="text" v-model="userInfo.blogName" /></p>
<p>博客地址：<input type="text" v-model="userInfo.blogUrl" /></p>
<button @click="getUserInfo(1)">查询用户</button>
<button @click="saveUserInfo">新增用户</button>
</fieldset>
</template>
<script setup>
//导入axios
import axios from 'axios';
import { ref } from 'vue';
//注意：这里使用 ref()，不要使用 reactive()，否则重新赋值后，响应式状态就缺失了
let userInfo = ref({});
//获取用户信息
function getUserInfo(userId) {
//使用 axios 的 GET 请求（写法一）
axios({
method: 'GET',
url: `/user/getUserInfo/${userId}`
}).then(
function (response) {
userInfo.value = response.data;
}
).catch(function (error) {
alert("发生异常：" + error.message);
});
}
//新增用户信息
function saveUserInfo() {
//使用 axios 的 POST 请求（写法二）
let promise = axios({
method: 'POST',
url: `/user/saveUserInfo`,
data: userInfo.value
});
//处理请求成功的回调函数
promise.then(
function (response) {
if (response) {
alert("操作成功");
} else {
alert("操作失败");
}
}
).catch(function (error) {
alert("发生异常：" + error.message);
});
}
</script>
<!-- CSS样式 -->
<style scoped>
input {
width: 300px;
padding: 3px;
font-size: 16px;
}
button {
margin-right: 10px;
}
</style> 实行结果：
（1）查询用户信息：
https://i-blog.csdnimg.cn/direct/d762fe8743e04ebeadbf22d41edb1ce8.png
（2）新增用户信息：
https://i-blog.csdnimg.cn/direct/25500c1abd8d4eb48b130ffb8d7814ea.png
6、axios 的二次封装（高级应用）
在项目中，axios 举行二次封装可以更加方便的使用 Ajax 哀求，提高代码复用性和维护性。同时可以封装统一的哀求与相应拦截处理。
axios 的二次封装，请点击欣赏文章：《Vue使用axios二次封装》
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]