vue中的异步请求Axios(个人学习笔记五)

这篇具有很好参考价值的文章主要介绍了vue中的异步请求Axios(个人学习笔记五)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

友情提醒

先看文章目录,大致了解知识点结构,直接点击文章目录可以跳转到文章指定位置。

第一章、传统的jQuery方式获取数据

1.1)后端controller层代码


@Controller
@RequestMapping("/admin")
public class AdminController {
    @RequestMapping("/getAdmin.action")
    @ResponseBody
    public List<Admin> getAdmin(){
        System.out.println("接收到异步请求");
        List<Admin> adminList = new ArrayList<>();
        Admin admin = new Admin(1001, "大朗1");
        Admin admin1 = new Admin(1002, "西门1");
        Admin admin2 = new Admin(1003, "金莲1);
        adminList.add(admin);
        adminList.add(admin1);
        adminList.add(admin2);
        return adminList;
    }
}

1.2)传统的jQuery获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jQuery3.7.js"></script>
    <script>
        $(function(){
            $.get("admin/getAdmin.action",function(adminList){
                //alert(adminList)
                var $tableDemo = $("#tableDemo");
                $.each(adminList,function(i,admin){
                    $tableDemo.append("<tr>\n" +
                        "<td>"+admin.adminId+"</td>\n" +
                        "<td>"+admin.adminName+"</td>\n" +
                        "</tr>")
                })
            },"json")
        })
    </script>
</head>
<body>
    <center>
        <table width="800px" border="1" cellspacing="0" id="tableDemo">
            <tr>
                <td>编号</td>
                <td>用户名</td>
              
            </tr>

        </table>
    </center>
</body>
</html>

1.3)使用vue对象和jQuery获取异步数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/jQuery3.7.js"></script>

</head>
<body>
    <div id="root">
        <center>
            <table width="800px" border="1" cellspacing="0" id="tableDemo">
                <tr>
                    <td>编号</td>
                    <td>用户名</td>
                </tr>
                <tr v-for="admin in adminList">
                    <td>{{admin.adminId}}</td>
                    <td>{{admin.adminName}}</td>
                    
                </tr>

            </table>
            <button @click="getAdmin();">加载数据</button>
        </center>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            adminList:[]
        },
        methods:{
            getAdmin(){
                console.log("发起异步请求前的this:",this)
                let that = this;//that就一直指向vue对象
                alert("发起异步请求")
                //发起异步请求
                $.get("admin/getAdmin.action",function(admins){
                    console.log("得到的结果:",admins)
                    //异步回执  浏览器要接收响应值  此时this指向window对象
                    //window不能读取vue中的adminList属性
                    console.log("异步成功时的回执this:",this)
                    that.adminList=admins;
                },"json")
            }
        }
    })
</script>
</html>

第二章、使用Axios获取数据

2.1)axios简介

①传统的Ajax请求是基于XMLHttpRequest(XHR)对象。可以直接使用。但是使用起来配置较为麻烦,实际开发中使用非常少,在MVC时代通常使用的是JQuery-Ajax。相对于传统的Ajax现在使用更多的是Fetch请求。
②Vue2.0时代开始,官方推荐使用axios作为新一代的Ajax库。axios其优点:在浏览器中发送XMLHttpRequest请求、在node中发送http请求、支持Promise API、拦截请求和相应、转换请求和响应数据等

2.2)axios两种使用方式

第一种:使用 cdn,导入js文件

 <script src="js/axios.min.js"></script>

vue中的异步请求Axios(个人学习笔记五),前端知识汇总,vue.js,学习,笔记
第二种:脚手架安装后import导入

命令:npm install axios -S -D 
npm install -S axios@0.19.0 

vue中的异步请求Axios(个人学习笔记五),前端知识汇总,vue.js,学习,笔记

①加上@0.19.0 是指定版本号;不指定npm默认安装最新的版本;
在需要使用的地方引入axios对象import axios from axios
Npm命令中的-S和-D

--save 等同于-S(是前者的缩写):安装包信息将放入
到dependencies(生产阶段的依赖,是项目运行时的依赖,程序上线后仍然需要依赖)
--dev等价于-D(也是前者的缩写):安装包信息将放入到
devDependencies(开发阶段的依赖,是我们在开发过程中需要的依赖)

③运行时环境和开发时环境
vue中的异步请求Axios(个人学习笔记五),前端知识汇总,vue.js,学习,笔记

2.3)axios的config属性

比较重要的配置信息:文章来源地址https://www.toymoban.com/news/detail-609739.html

method:请求方式   默认是get   get/post
url:请求路径  admin/getAdmin.action
baseUrl:基础请求路径  http://ip:port/工程名
params:请求时携带的URL参数  只能携带key-value方式的参数,params是用来携带请求参数的
data:请求时携带参数要包裹在对象格式即只能携带浏览器可以识别的对象
类型参数(Bolb  jsonStr  formData), data是用来携带请求数据的

timeOut:请求超时时间  毫秒值  
proxy:代理服务器
headers:请求头信息
responseType: "json", // 默认的  表示服务器响应的数据类型

2.4)使用axios发起异步请求获得数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/jQuery3.7.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body>
    <div id="root">
        <center>
            <table width="800px" border="1" cellspacing="0" id="tableDemo">
                <tr>
                    <td>编号</td>
                    <td>用户名</td>
                </tr>
                <tr v-for="admin in adminList">
                    <td>{{admin.adminId}}</td>
                    <td>{{admin.adminName}}</td>
                </tr>
            </table>
        </center>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            adminList:[]
        },
        methods:{
        },
        //初始化阶段 发起异步请求  获取adminList的数据
        created(){
            let that = this;
            axios({
                url:"admin/getAdmin.action"
            }).then(function(result){
                console.log(result)
                console.log(result.data)
                console.log("axios异步请求回执:",this)
                that.adminList=result.data;
            })
        }
    })
</script>
</html>

第三章、在springMVC中使用axios获取数据

3.1)发起带参数的axios请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="root">
        <button @click="sendAxiosMethod1()">发起axios异步请求</button>
        <form>
            卡号:<input type="text" name="userName" v-model="userName"><br/>
            密码:<input type="password" name="userPwd" v-model="userPwd"><br/>
            <input type="button" value="提交" @click="loginUser1()">
        </form>
    </div>
</body>
    <script>
        new Vue({
            el:"#root",
            data:{
                userName:"",
                userPwd:""
            },
            methods:{
                sendAxiosMethod1(){
                    axios({
                        method:"get",
                        url:"demo1/axiosMethod1.action",
                        params:{
                            userName:"大朗",
                            userPwd:123
                        },
                        //responseType:"json"
                    }).then(function(result){
                        //alert(result)
                        console.log(result)
                        console.log("响应的配置信息:",result.config)
                        console.log("响应的服务器回执信息:",result.data)
                        console.log("响应头信息:",result.headers)
                        console.log("响应的状态码:",result.status)
                    })
                },
                loginUser(){
                    let loginParam={"loginName":this.userName,"loginPwd":this.userPwd}
                    let  jsonStr="{loginName:this.userName,loginPwd:this.userPwd}"//"abc"
                    console.log("请求参数:",loginParam)
                    console.log("这次的参数是params方式传递")
                    // console.log("这次的参数是data方式传递")
                    //登录
                    axios({
                        method:"post",
                        url:"demo1/loginUser.action",
                        /*params:{
                            loginName:this.userName,
                            loginPwd:this.userPwd
                        }*/
                        params:loginParam
                        //data:loginParam

                    }).then(function(result){
                        console.log(result.data)
                    });
                },
                loginUser1(){
                    //使用data方式传递参数
                    let loginParam={"loginName":this.userName,"loginPwd":this.userPwd}//js对象  json
                    console.log("loginParam:",loginParam)
                    //alert("loginParam的格式:"+typeof(loginParam))
                    //把loginParam转换成json串
                    let jsonStr = JSON.stringify(loginParam)//"{"loginName":this.userName,"loginPwd":"123"}"
                    console.log("json串后的结果jsonStr:",jsonStr)
                    //alert("jsonStr的格式:"+typeof(jsonStr))
                    //只能放在请求体  只能使用post请求
                    axios({
                        method:"post",
                        url:"demo1/getDataDemo1.action",
                        data:jsonStr,
                        headers:{
                            "Content-type":"application/json"
                        }
                    }).then(function(result){
                        console.log(result.data)
                    });

                }
            }

        });
    </script>
</html>

3.2)后端controller层

package com.powernode.controller;

import com.powernode.bean.LoginUser;
import com.powernode.util.ResultObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/demo1")
public class AxiosControllerDemo1 {
    //接收异步请求
    @RequestMapping("/axiosMethod1.action")
    @ResponseBody
    public ResultObject axiosMethod1(String userName,String userPwd,ResultObject resultObject){
        System.out.println("userName = " + userName);
        System.out.println("userPwd = " + userPwd);
        resultObject.setResultCode(10086);
        resultObject.setResultMessage("请求成功");
        return resultObject;
    }
    //登录处理
    @PostMapping("/loginUser.action")
    @ResponseBody
    public ResultObject loginUser(String loginName,String loginPwd,ResultObject resultObject){
        System.out.println("loginName = " + loginName);
        if(loginName.equals("888123")&& loginPwd.equals("123")){
            resultObject.setResultCode(0);
            resultObject.setResultMessage("登录成功");
        }else{
            resultObject.setResultCode(1);
            resultObject.setResultMessage("登录失败!!!");
        }
        return resultObject;
    }
    @RequestMapping("/getDataDemo1.action")
    @ResponseBody//把java对象转换成json串
    //@RequestBody  把请求中的json串解析成 json
    public ResultObject getDataDemo1(@RequestBody LoginUser loginUser){
        System.out.println("loginUser = " + loginUser);
        System.out.println("loginName = " + loginUser.getLoginName());

        ResultObject resultObject = new ResultObject();
        resultObject.setResultCode(10011);
        resultObject.setResultMessage("你好 jsonStr");
        return resultObject;
    }
}

第四章、使用axios实现异步文件上传

4.1)前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="root">
        文件上传:<input type="file" @change="getFile($event)">
        <input type="button" value="上传" @click="fileUploadDemo()">
        <hr/>
         <!-- 根据文件路径展示在到浏览器-->
        <img :src="imgSrc"/>
    </div>
</body>
    <script>
        new Vue({
            el:"#root",
            data:{
                upFile:"",
                imgSrc:"",
                addUser:{
                    id:"",
                    name:"",
                    sex:""
                },
                updateUser:{}
            },
            methods:{
                getFile(event){
                //通过event获得需要上传的文件
                    console.log(event)
                    let upFile = event.target.files[0];
                    console.log(upFile)
                    //把得到的文件赋给了data中的upFile
                    this.upFile = upFile;
                },
                fileUploadDemo(){
                    //文件上传三要素?1 导包
                    //2 post请求  multipart/from-data  用于同步请求
                    //异步文件上传  是设置请求头headers:multipart/from-data
                    //3、配置文件上传解析器 服务器识别multipart
                    //js中有一个formData对象  是一个key-value的容器对象
                    let myF = new FormData();
                    let that = this;
                    myF.append("userName","大朗");
                    myF.append("upFile",this.upFile)
                    axios({
                        method:"post",
                        url:"demo2/upFileDemo1.action",
                        headers:{
                            "Content-type":"multipart/form-data"
                        },
                        //要上传的文件是 this.upFile,包裹在myF中通过data方式传给后端
                        data:myF
                    }).then(function(result){
                        console.log(result.data)
                        //获取文件路径回显到浏览器
                        that.imgSrc = "images/"+result.data.resultData.fileName

                    });
                }
            }


        });
    </script>
</html>

4.2)后端controller层代码

package com.powernode.controller;

import com.powernode.bean.LoginUser;
import com.powernode.util.ResultObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
@RequestMapping("/demo2")
public class AxiosControllerDemo2 {
    @RequestMapping("/upFileDemo1.action")
    @ResponseBody
    public ResultObject upFileDemo1(String userName, MultipartFile upFile, HttpServletRequest request,ResultObject resultObject) throws IOException {
        System.out.println("userName = " + userName);
        System.out.println("upFile = " + upFile);
        String oldFileName = upFile.getOriginalFilename();
        String fileTypeName = oldFileName.substring(oldFileName.lastIndexOf("."));
        String uuid = UUID.randomUUID().toString();
        String fileName = uuid+fileTypeName;
        File file = new File(request.getServletContext().getRealPath("/images")+"/"+fileName);
        upFile.transferTo(file);
        resultObject.setResultCode(10000);
        resultObject.setResultMessage("上传成功");
        resultObject.setDataToMap("fileName", fileName);
        return resultObject;
    }
}

到了这里,关于vue中的异步请求Axios(个人学习笔记五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue全家桶(二):Vue中的axios异步通信

    Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据

    2024年02月09日
    浏览(73)
  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(51)
  • 【vue】vue前端、生产(线上)环境请求unicloud云服务空间axios报错

    使用axios的时候,如果是开发环境下,WebStorm(IDEA)会自带跨域功能,说白了就是不用考虑跨域的事情了。但是在生产环境下,vue前端编译成静态文件,只是普通的http请求,所以根据浏览器的跨域规则(域名、端口、协议,一个不同就是跨域),不能发送请求,所以要借助反

    2024年02月07日
    浏览(40)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(50)
  • 解决axios异步请求问题(异步变为同步)

    在目前一个需求中,我需要等待axios请求完成后,判断请求是否出现异常,然后来判断是否关闭弹窗 修改后大概代码如下: 原来在方法中没有使用 async 和 await ,由于发送的axios请求是异步请求,所以在请求还没完成的时候 submitForm 这个方法就已经将 flag 返回了 这就导致了一

    2024年02月03日
    浏览(40)
  • vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法

    axios封装-我常用的请求头参数  application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正常。前端页面正常跳转。 2.后端设置为post请求,前端a

    2024年02月02日
    浏览(50)
  • 简述vue项目中的两种请求方式(axios和vueResource)

    今天学习了vue的两种发送请求的方式,vueResource和axios,比较了两种方式的使用 VueResource模块发送请求 1. VueResource概述 VueJS的生态圈除了VueRouter之外,还有很多的插件,在网络请求中,vue是借助于vue-resource模块来进行异步请求,跨域请求。 vue-resource是Vue.js的一款插件,它可以

    2024年02月03日
    浏览(48)
  • Ajax 与 Axios 异步请求

    1. 网页中如何请求数据 2. 资源的请求方式 客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。 get 请求通常用于获取服务端资源(向服务器要资源) post 请求通常用于向服务器提交数据(往服务器发送资源) 1. 什么是Ajax 2. 为什么要学

    2024年03月28日
    浏览(51)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(53)
  • 数据交互系列:简述vue项目中的两种请求方式(axios和vueResource)

    今天学习了vue的两种发送请求的方式,vueResource和axios,比较了两种方式的使用 VueResource模块发送请求 1. VueResource概述 VueJS的生态圈除了VueRouter之外,还有很多的插件,在网络请求中,vue是借助于vue-resource模块来进行异步请求,跨域请求。 vue-resource是Vue.js的一款插件,它可以

    2024年02月02日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包