使用axios实现Ajax请求
在实际项目开发中，前端页面中所需的数据通常要从服务器端获取，这就需要实现本地与服务器端的通信，Vue推荐使用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。代码如下：
js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>如果在项目中使用axios，则可以使用npm方式进行安装。在命令提示符窗口中输入如下命令：
shell
npm install axios --save或者使用yarn安装，命令如下：
shell
yarn add axios --save3、发送get请求
get请求主要从服务器上获取数据，传递的数据量比较小。使用axios发送get请求主要有两种格式：
- 第一种是使用axios()方法，格式如下：
js
axios(options)options参数用于设置发送请求的配置选项。示例代码如下：
js
axios({
method: 'get', //请求方式
url:'/book', //请求的URL
params:{type:'Vue',number:10} //传递的参数
})- 第二种是使用axios的get()方法，格式如下：
js
axios.get(url[,options])url：请求的服务器URL。options：发送请求的配置选项。
示例代码如下：
js
axios.get('/book',{
params:{ //传递的参数
type : 'Vue',
number : 10
}
})使用axios发送get请求时，如果有要发送的数据，可以在配置选项中使用params字段指定要发送的数据。另外，还可以采用查询字符串的形式将数据附加在URL后面。例如，上述代码可以修改为：
js
axios.get('/book?type=Vue&number=10')使用axios无论发送get请求还是post请求，在发送请求后都需要使用回调函数对请求的结果进行处理。如果请求成功，需要使用.then方法处理请求的结果；如果请求失败，需要使用.catch方法处理请求的结果。示例代码如下：
js
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文件中的数据，并输出读取结果。关键代码如下：
js
<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>服务端：
js
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()方法，格式如下：
js
axios(options)options参数用于设置发送请求的配置选项。示例代码如下：
js
axios({
method: 'post',
url: '/book',
data: {
type: 'Vue',
number: 10
}
})- url：请求的服务器URL。
- data：发送的数据。
- options：发送请求的配置选项。
js
axios.post('book.php', {
type:'Vue',
number:10
})使用axios发送post请求来传递数据时，数据传递的方式有很多种。可以将传递的数据写成对象的形式，如"{type:'Vue'，number:10}"。还可以将传递的数据写成字符串的形式，如"type=Vue&number=10"。
示例：验证用户登录。
在用户登录表单中，使用axios检测用户登录是否成功。实现步骤如下。
- 定义
元素，并设置其id属性值为app，在该元素中定义用户登录表单，应用v-model指令对用户名文本框和密码框进行数据绑定，当单击"登录"按钮时调用login()方法，代码如下：
html
<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>- 编写CSS代码，为页面元素设置样式，代码如下：
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>- 创建根组件实例，在实例中定义数据和方法，在定义的login方法中，首先判断用户输入的用户名和密码是否为空，如果不为空就使用axios发送post请求，根据服务器返回的响应判断登录是否成功。代码如下：
html
<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>后端：
js
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"，单击"登录"按钮后会显示登录成功的提示，如图所示。
