Vue3——使用axios实现Ajax请求

使用axios实现Ajax请求1、什么是axios2、引入axios3、发送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 srchttps://unpkg.com/axios/dist/axios.min.js/script如果在项目中使用axios则可以使用npm方式进行安装。在命令提示符窗口中输入如下命令npminstallaxios--save或者使用yarn安装命令如下yarnaddaxios –save3、发送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?typeVuenumber10)使用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 idappbutton clickreqJson获取JSON数据/button!--通过div标签输出请求内容--div{{message}}/div/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript srchttps://unpkg.com/vue-routernext/scriptscript srchttps://unpkg.com/axios/dist/axios.min.js/scriptscript typetext/javascriptconstvmVue.createApp({data(){return{message:}},methods:{reqJson:function(){axios({method:get,url:http://127.0.0.1:3000/api/user}).then((result){this.messageresult.data;}).catch((err){console.log(err);});}}});vm.mount(#app);/script服务端constexpressrequire(express);constappexpress();//处理前端跨域constcorsrequire(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}”​。还可以将传递的数据写成字符串的形式如“typeVuenumber10”​。示例验证用户登录。在用户登录表单中使用axios检测用户登录是否成功。实现步骤如下。定义元素并设置其id属性值为app在该元素中定义用户登录表单应用v-model指令对用户名文本框和密码框进行数据绑定当单击“登录”按钮时调用login()方法代码如下dividappdivclasstitle用户登录/divformrefmyformdivclassonedivclassonelabelforusername用户名/labelinputiduesrnametypetextv-modelusernamerefuname/divdivclassonelabelforpwd密码/labelinputidpwdtypepasswordv-modelpwdrefupwd/divdivclasstwoinputtypebuttonvalue登录clicklogininputtyperesetvalue重置/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请求根据服务器返回的响应判断登录是否成功。代码如下scriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscriptsrchttps://unpkg.com/vue-routernext/scriptscriptsrchttps://unpkg.com/axios/dist/axios.min.js/scriptscripttypetext/javascriptconstvmVue.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后端constexpressrequire(express);constappexpress();//处理前端跨域constcorsrequire(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”​单击“登录”按钮后会显示登录成功的提示如图所示。