手把手教你入门vue+springboot开发（十七）--Promise研究

---

前言

JavaScript是一种单线程的异步编程语言，在Promise出现之前，它跟C/C++语言一样通过回调函数处理异步操作，异步逻辑复杂难懂，特别是如果有过多嵌套的回调函数就会导致回调地狱。Promise解决了回调地狱的问题，使异步编程更简洁直观，增强了代码的可读性。本篇将结合vue前端代码研究一下Promise的使用。

---

一、async/await

在前端代码中async/await随处可见，它其实就是使用了Promise的语法糖，使用起来比Promise更简洁，是对Promise的进一步的优化，用接近于同步代码的写法实现异步编程，看不到回调函数。下面我们就把它还原成Promise实现供大家理解。
‌首先我们来看看UserManage.vue中查询用户信息的函数：

const userList = async () => {
   
    let result = await userListService();

    console.log(result);
    //渲染视图
    users.value = result.data;
}

它实际上就是下面这一段代码，把它替换成下面这段代码，效果一样，大家可以自己试试。

const userList = () => {
   
  return Promise.resolve(userListService()).then(result => {
   
    console.log(result);
    //渲染视图
    users.value = result.data;
  }).catch(error => {
   
    console.log(error);
  });
}

async 返回的是一个Promise对象，await userListService()，那么它的执行函数就是userListService，后面两句就是执行成功后的回调函数，即then中的回调函数。
再来看看Login.vue里面的登录函数

const login = async ()=>{
   
    if(rememberMe.value){
   
	    userInfoStore.setInfo({
   "username":registerData.value.username,"password":registerData.value.password,"rememberMe":rememberMe.value});
	    console.log("1" + registerData.value.username + "2" + registerData.value.password);
	    console.log("11" + userInfoStore.info.username + "22" + userInfoStore.info.password);
    }

    await verifyCaptcha(captcha.value); // 等待验证码验证

    //调用接口,完成登录
    let result =  await userLoginService