Es6Promise+异步请求

ES6 Promise

Promise,就是为了解决多层的函数,方法的嵌套调用而存在的;

“它就是把一层一层向内嵌套调用的方法,给拉成一串连续调用的方法”,每个嵌套调用的方法,都向调用者返回this,也就是返回自身,然后带着上一次的调用结果,进入下一个嵌套调用的环节。

伪代码:

<script type="text/javascript">
	//普通的嵌套js
    function xx(){
    	function aa(){
            function ss(){
                ..一层一层不断向下
            }
        }
	}
</script>

<script type="text/javascript">
	//promise的实现思路
    //promise的连续调用自己的上一轮的运行的结果,
    //用的是.then()方法
    var promise = new Promise(){xx};
	promise.then(xx的东西).then(aa的东西).then(ss的东西).不断向下调用
</script>

他就是用来操作一个异步操作的结果的方法

new Promise(
    /* executor */
    /* 这其实是一个回调函数 */
    function(resolve, reject) {
        if (/* success */) {
            // ...执行代码
            resolve();
        } else { /* fail */
            // ...执行代码
            reject();
        }
    }
);

链式调用

<script type="text/javascript">
			var promise1 = new Promise((resolve,reject)=>{
				setTimeout(function(){
					resolve('success');
				},2000);
			});
			
			promise1.then((data)=>{
				console.log(data); //success
			},(err)=>{  //不执行
				console.log(err);
			}).then((data)=>{
				//上一步的then()方法没有返回值
				console.log('链式调用:'+data);// 链式调用:undefined
			}).then((data)=>{
				//......
				console.log(promise1);
			});
			
			console.log("普通js")
		</script>

异步请求

①定义一个异步请求模板

// 定义一个使用promise的ajax请求,模拟用户登录场景
            const ajaxPromise = obj =>{
                return new Promise((resolve,reject)=>{
                    $.ajax({
                        type:obj.type,
                        url:obj.url,
                        data:obj.data,
                        dataType: obj.dataType,
                        contentType: obj.contentType,
                        success: res => {
                            if(res.code!=0){
                                console.log('请求失败')
                            }
                            resolve(res);  //请求成功则判断为resolve状态
                        },
                        error: err => {
                            reject(err.status);  //请求失败则判断为reject状态
                        }
                    })
                })
            }

进行异步调用

方式一:通过路径传参

检测用户名是否存在:

//验证用户名是否存在
            let usernameExist = ()=>{
                ajaxPromise({
                    type:"get",
                    url:"/account/checkUsernameExit/"+username_input.value,
                    data:null,
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                }).then(res=>{
                    document.getElementById("msg").innerText=res.msg;
                }).catch(err=>{
                    document.getElementById("msg").innerText=res.msg;
                })
            }

后台获取数据并返回json:

@GetMapping("/checkUsernameExit/{username}")
    @ResponseBody
    public Result checkUsernameExit(@PathVariable(value = "username") String username){
        String msg="";
        if(username.equals("admin")){
            result.setCode(0);
            msg = "Exist";
        }else{
            result.setCode(0);
            msg = "No Exist";
        }
        result.setMsg(msg);
        return result;
    }
方式二:通过json传参(包括从form表单中获取数据进行异步请求)

用户登陆:

//用户登录
            let userLogin = ()=>{
                //第一次执行ajaxPromise
                ajaxPromise({
                    type:"post",
                    url: '/account/login',
                    data: JSON.stringify({
                        "username":username_input.value,
                        "password":password_input.value
                    }),
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                }).then(res=>{
                    console.log('后台校验提交的数据并返回成功信息');
                    document.getElementById("msg").innerText=res.msg;
                }).catch(err=>{
                    console.log('用户校验提交的数据失败,无法登录');
                    document.getElementById("msg").innerText=res.msg;
                })
            }

后台获取数据并返回json:

@PostMapping("/login")
    @ResponseBody
    public Result login(@RequestBody Map<String,String> map){
        System.out.println("username:"+map.get("username"));
        System.out.println("password:"+map.get("password"));
        String username = map.get("username");
        String password = map.get("password");
        String msg = "";

        System.out.println("123".equals(password));
        if(username.equals("admin")&&password.equals("123")){
            result.setCode(0);
            msg = "登录成功";
        }else{
            result.setCode(0);
            msg = "登录失败";
        }
        System.out.println("msg:"+msg);
        result.setMsg(msg);
        return result;
    }

遇到的坑:

在异步调用中请求中的data数据如果是json对象,需要使用JSON.stringify(json)转换为字符串,然后在Controller中使用@RequestBody Map<String,Object> map 作为参数获取json串

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZenSheep

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值