promise到底如何返回值,记录小用法

通过axios请求数据,将promise中的数据return出外层调用函数去:
之前的例子没有写得清晰易懂,重新写了一版:

更新示例:

//伪axios异步获取数据
function fakeAxios() {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("result"), 100;
    });
  });
}
// 在then中得到的值,如何return到本函数外。
function getNothing() {
  //这样肯定undefined,函数体在赋值执行前返回
  let result;
  fakeAxios().then((res) => {
    result = res + "0";
  });
  return result;
}
//以下5种为可行方案
async function getResult1() {
  let result;
  await fakeAxios().then((res) => {
    result = res + "1";
  });
  return result;
}

async function getResult2() {
  let res = await fakeAxios();
  return res + "2";
}

function getResult3() {
  return fakeAxios(); //放到外层处理
}

function getResult4() {
  return fakeAxios().then((res) => {
    return Promise.resolve(res + "4");
  });
}

function getResult5() {
  return fakeAxios().then((res) => {
    return new Promise((resolve) => {
      resolve(res + "5");
    });
  });
}

async function main() {
  let r0 = await getNothing(); //错误示例
  let r1 = await getResult1();
  let r2 = await getResult2();
  let r3;
  await getResult3().then((res) => (r3 = res + "3"));
  let r4 = await getResult4();
  let r5 = await getResult5();
  console.log(r0, r1, r2, r3, r4, r5);
}
main();
//输出 undefined result1 result2 result3 result4 result5

之前的版本:

第一种方式,不进then,整体扔出去,数据在外层处理

checkUsernameExist() {
      return this.$axios.post("user_exsit", {
        username: this.formSignup.username
      });
      
    },

var checkUsername = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {

        var x = await this.checkUsernameExist();
        console.log(x);
        if (false) {
          callback(new Error("用户名重复"));
        } else {
          callback();
        }

      }
    };

第二种方式,在then中进行一定数据处理以后再return一个Promise.resolve()方法

checkUsernameExist() {
      return this.$axios
        .post("user_exsit", {
          username: this.formSignup.username
        })
        .then(res => {
          console.log(res);
          return Promise.resolve(res.data);
        });
    },
    

第二种还可以写为new Promise的形式:

checkUsernameExist() {
      return this.$axios
        .post("user_exsit", {
          username: this.formSignup.username
        })
        .then(res => {
          console.log(res);
          return new Promise(resolve => {
            resolve(res.data);
          });
        });
    },

版权声明:本文为henjuewang原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。