Vue3——使用axios实现Ajax请求-程序员充电站

使用axios实现Ajax请求

- 1、什么是axios
- 2、引入axios
- 3、发送get请求
- 4、发送post请求

在实际项目开发中，前端页面中所需的数据通常要从服务器端获取，这就需要实现本地与服务器端的通信，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。代码如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

npminstallaxios--save

或者使用yarn安装，命令如下：

yarnaddaxios –save

3、发送get请求

get请求主要从服务器上获取数据，传递的数据量比较小。使用axios发送get请求主要有两种格式：

第一种是使用axios()方法，格式如下：

axios(options)

options参数用于设置发送请求的配置选项。示例代码如下：

axios({method:'get',//请求方式url:'/book',//请求的URLparams:{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">constvm=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>

服务端：

constexpress=require('express');constapp=express();//处理前端跨域constcors=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检测用户登录是否成功。实现步骤如下。

定义
元素，并设置其id属性值为app，在该元素中定义用户登录表单，应用v-model指令对用户名文本框和密码框进行数据绑定，当单击“登录”按钮时调用login()方法，代码如下：

<divid="app"><divclass="title">用户登录</div><formref="myform"><divclass="one"><divclass="one"><labelfor="username">用户名：</label><inputid="uesrname"type="text"v-model="username"ref="uname"></div><divclass="one"><labelfor="pwd">密码：</label><inputid="pwd"type="password"v-model="pwd"ref="upwd"></div><divclass="two"><inputtype="button"value="登录"@click="login"><inputtype="reset"value="重置"></div></div></form></div>

编写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请求，根据服务器返回的响应判断登录是否成功。代码如下：

<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script><scriptsrc="https://unpkg.com/vue-router@next"></script><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script><scripttype="text/javascript">constvm=Vue.createApp({data(){return{username:'',pwd:''}},methods:{login:function(){if(this.username===''){alert('请输入用户名');this.$refs.uname.focus();}elseif(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>

后端：

constexpress=require('express');constapp=express();//处理前端跨域constcors=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');});