Vue3使用axios实现Ajax请求过程
1、什么是axios
在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而Vue.js并未提供与服务器端通信的接口。
从Vue.js 2.0版本之后，官方推荐使用axios来实现Ajax请求。
axios是一个基于promise的HTTP客户端，它的主要特点如下：
- 从浏览器中创建XMLHttpRequest。
- 从node.js发出HTTP请求。
- 支持Promise API。
- 拦截请求和响应。
- 转换请求和响应数据。
- 取消请求。
- 自动转换JSON数据。
- 客户端支持防止CSRF/XSRF。
2、引入axios
在使用axios之前需要在页面中进行引入，可以使用CDN方式引入axios。
代码如下：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
如果在项目中使用axios，则可以使用npm方式进行安装。
在命令提示符窗口中输入如下命令：
npm install axios --save
或者使用yarn安装，命令如下：
yarn add axios –save
3、发送get请求
get请求主要从服务器上获取数据，传递的数据量比较小。使用axios发送get请求主要有两种格式：
- 第一种是使用axios()方法，格式如下：
axios(options)
options参数用于设置发送请求的配置选项。示例代码如下：
axios({
method: 'get', //请求方式
url:'/book', //请求的URL
params:{type:'Vue',number:10} //传递的参数
})
- 第二种是使用axios的get()方法，格式如下：
axios.get(url[,options])
url：请求的服务器URL。options：发送请求的配置选项。
示例代码如下：
axios.get('/book',{
params:{ //传递的参数
type : 'Vue',
number : 10
}
})
使用axios发送get请求时，如果有要发送的数据，可以在配置选项中使用params字段指定要发送的数据。另外，还可以采用查询字符串的形式将数据附加在URL后面。
例如，上述代码可以修改为：
axios.get('/book?type=Vue&number=10')
使用axios无论发送get请求还是post请求，在发送请求后都需要使用回调函数对请求的结果进行处理。
如果请求成功，需要使用.then方法处理请求的结果；如果请求失败，需要使用.catch方法处理请求的结果。
示例代码如下：
axios.get('/book',{
params: {
type: 'Vue',
number: 10
}
}).then((response)=>{
console.log(response.data);
}).catch((error)=>{
console.log(error);
})
这两个回调函数都有各自独立的作用域，如果在函数内部访问Vue实例，则不能直接使用this关键字。为了解决这个问题，需要在回调函数的后面添加.bind(this)。
示例：读取JSON
使用axios发送get请求，读取JSON文件中的数据，并输出读取结果。
关键代码如下：
<div id="app">
<button @click="reqJson">获取JSON数据</button>
<!-- 通过<div>标签输出请求内容-->
<div>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
const vm = Vue.createApp({
data() {
return {
message: ''
}
},
methods: {
reqJson: function() {
axios({
method: 'get',
url: 'http://127.0.0.1:3000/api/user'
}).then((result) => {
this.message = result.data;
}).catch((err) => {
console.log(err);
});
}
}
});
vm.mount('#app');
</script>
服务端：
const express = require('express');
const app = express();
//处理前端跨域
const cors = require('cors');
app.use(cors({
origin: 'http://127.0.0.1:5500'
}));
// 返回 JSON 接口
app.get('/api/user', (req, res) => {
res.json({
code: 0,
msg: 'success',
data: {
id: 1,
name: '李四',
role: 'admin'
}
});
});
app.listen(3000, () => {
console.log('Express 服务已启动：http://localhost:3000/api/user');
});
运行上述代码，单击“获取JSON数据”按钮读取JSON数据，结果如图所示。
4、发送post请求
post请求主要是向服务器传递数据，传递的数据量比较大。使用axios发送post请求同样有两种格式：
第一种是使用axios()方法，格式如下：
axios(options)
options参数用于设置发送请求的配置选项。
示例代码如下：
axios({
method: 'post',
url: '/book',
data: {
type: 'Vue',
number: 10
}
})
- url：请求的服务器URL。
- data：发送的数据。
- options：发送请求的配置选项。
axios.post('book.php', {
type:'Vue',
number:10
})
使用axios发送post请求来传递数据时，数据传递的方式有很多种。
- 可以将传递的数据写成对象的形式，如“{type:‘Vue’，number:10}”。
- 还可以将传递的数据写成字符串的形式，如“type=Vue&number=10”。
示例：验证用户登录。
在用户登录表单中，使用axios检测用户登录是否成功。实现步骤如下。
1.定义
元素，并设置其id属性值为app，在该元素中定义用户登录表单，应用v-model指令对用户名文本框和密码框进行数据绑定，当单击“登录”按钮时调用login()方法，代码如下：
<div id="app">
<div class="title">用户登录</div>
<form ref="myform">
<div class="one">
<div class="one">
<label for="username">用户名：</label>
<input id="uesrname" type="text" v-model="username" ref="uname">
</div>
<div class="one">
<label for="pwd">密码：</label>
<input id="pwd" type="password" v-model="pwd" ref="upwd">
</div>
<div class="two">
<input type="button" value="登录" @click="login">
<input type="reset" value="重置">
</div>
</div>
</form>
</div>
2.编写CSS代码，为页面元素设置样式，代码如下：
<style>
body{
font-family: 微软雅黑;
font-size: 14px;
}
.title{
font-size: 18px;
line-height: 50px;
margin-left: 130px;
}
.one{
margin: 10px 0;
}
.one label{
width: 100px;
float: left;
text-align: right;
height: 20px;
line-height: 20px;
}
.two{
padding: 120px;
}
</style>3.创建根组件实例，在实例中定义数据和方法，在定义的login方法中，首先判断用户输入的用户名和密码是否为空，如果不为空就使用axios发送post请求，根据服务器返回的响应判断登录是否成功。
代码如下：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
const vm = Vue.createApp({
data() {
return {
username: '',
pwd: ''
}
},
methods: {
login: function() {
if(this.username === '') {
alert('请输入用户名');
this.$refs.uname.focus();
} else if(this.pwd === '') {
alert('请输入密码');
this.$refs.upwd.focus();
} else {
console.log(this.username + ':' + this.pwd);
axios.post('http://127.0.0.1:3000/api/login', {
username: this.username,
pwd: this.pwd
}).then((result) => {
console.log(result);
alert('登录成功!')
}).catch((err) => {
console.log(err);
});
}
}
}
});
vm.mount('#app');
</script>
后端：
const express = require('express');
const app = express();
//处理前端跨域
const cors = require('cors');
app.use(cors({
origin: 'http://127.0.0.1:5500'
}));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// 返回 JSON 接口
app.get('/api/user', (req, res) => {
res.json({
code: 0,
msg: 'success',
data: {
id: 1,
name: '李四',
role: 'admin'
}
});
});
//登录接口
app.post('/api/login', (req, res) => {
console.log(req.body);
res.json({ msg: 'ok' });
});
app.listen(3000, () => {
console.log('Express 服务已启动：http://localhost:3000/api/user');
});
运行上述代码，在表单中输入正确的用户名“jerry”和密码“123456”，单击“登录”按钮后会显示登录成功的提示，如图所示。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于前端实现pdf预览功能的相关资料,前端实现预览最好的效果还是PDF,不会出现一些文字错乱和乱码的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
本篇文章主要主要介绍了Vue的MVVM实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了vue中mint-ui的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
vue在取对象长度length时候出现undefined的解决
这篇文章主要介绍了vue在取对象长度length时候出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
这篇文章主要介绍了解决antd日期选择组件,添加value就无法点击下一年和下一月问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue关于自定义事件的$event传参问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了使用md5在vue中的axios请求时加密API问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了如何解决vue在ios微信"复制链接"功能问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
springboot之springboot与netty整合方案
这篇文章主要介绍了VUE之关于store状态管理核心解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue中el-table单元格复制功能实现,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
最新评论