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串