利用Promise 和 callback获取异步函数的处理结果

一、案例情景（基于vue脚手架）

手机号验证：如果手机号格式错误，得到处理结果为false；如果手机号格式正确，axios请求接口，如果返回的code为201（表示手机号已经被注册），得到处理结果为false，否则即手机号未被注册，得到处理结果为false。

代码准备：

    <!-- 界面部分 -->
    <div class="phone">
      <input type="text" v-model="phoneNum" placeholder="请输入手机号">
      <span class="info" v-html="phoneInfo"></span>
    </div>

/* data(){ return {} } 中准备变量 */
  data() {
    return {
      phoneNum: '',
      phoneInfo: '',
    }
  }

二、callback获取处理结果

1. methods: {} 中定义手机号的验证函数 verifyPhone(callback)

    verifyPhone(callback) {
      let result = /^1[3456789]\d{9}$/.test(this.phoneNum);
      if (result) {
        console.log('格式正确，发送请求...');
        this.axios.post('/api/users/register', `phone=${this.phoneNum}`).then(response => {
          console.log('进入判断前...');
          console.log(response);
          if (response.data.code == 201) {
            this.phoneInfo = `<i class="iconfont" style="color: red;">&#xe695;</i> 该手机号已被注册`;
            result = false;
            console.log('手机号被注册...');
            callback(result);
          } else {
            this.phoneInfo = `<i class="iconfont" style="color: green;">&#xe61a;</i>`;
            console.log('手机号可以用...');
            callback(result);
          }
        })
      } else {
        this.phoneInfo = `<i class="iconfont" style="color: red;">&#xe695;</i> 手机号格式不正确`;
        console.log('格式不正确，不发送请求...')
        callback(result);
      }
    }

2. watch: {}中监听 this.phoneNum 的变化执行this.verifyPhone(callback)

  watch: {
    /* 通过回调函数获取异步函数的处理结果，应当在回调函数中执行需要用到该结果的操作 */
    phoneNum() {
      this.verifyPhone(result => {
        let res = result;
        console.log(res);
      });
      /* 注释掉的部分为错误示范：问题出在，this.verifyPhone是一个异步函数，而res声明在了主线程里面，然后刚声明就被打印了，故得到undefined */
      /*
      let res;
      this.verifyPhone(result => res = result);
      console.log(res); // undefined
      */
    }
  }

三、Promise获取处理结果

1. Promise相关知识

使用场景: 控制多个异步函数顺序执行，故可以等一个异步函数处理完毕拿到响应结果后执行下一步操作，以此可以完成获取异步函数处理结果的需求。

``Promise`对象三大状态：

1). 当异步任务执行过程中，整个new Promise()对象处于pending(挂起)状态

2). 当异步任务成功执行完，调用成功的开关函数时，整个new Promise()对象切换为fulfilled(成功)状态，new Promise()会自动调用.then()执行下一项任务

3). 当异步任务执行出错，调用失败的开关函数时，整个new Promise()对象切换为``rejected(出错)状态，new Promise()会自动调用.catch()`执行错误处理代码

2. methods: {} 中定义手机号的验证函数 verifyPhone( return new Promise(funciton() {}) )

    verifyPhone() {
      return new Promise((resolve, reject) => {
        /* 后面会用到this，故此处只能使用箭头函数 */
        let result = /^1[3456789]\d{9}$/.test(this.phoneNum);
        if (result) {
          console.log('格式正确，发送请求...');
          this.axios.post('/api/users/register', `phone=${this.phoneNum}`).then(response => {
            console.log('进入判断前...');
            console.log(response);
            if (response.data.code == 201) {
              this.phoneInfo = `<i class="iconfont" style="color: red;">&#xe695;</i> 该手机号已被注册`;
              result = false;
              console.log('手机号被注册...');
              resolve(result);
            } else {
              this.phoneInfo = `<i class="iconfont" style="color: green;">&#xe61a;</i>`;
              console.log('手机号可以用...');
              resolve(result);
            }
          })
        } else {
          this.phoneInfo = `<i class="iconfont" style="color: red;">&#xe695;</i> 手机号格式不正确`;
          console.log('格式不正确，不发送请求...');
          resolve(result);
        }
      });
    }

3. watch: {}中监听 this.phoneNum 的变化执行this.verifyPhone()

  watch: {
    phoneNum() {
      this.verifyPhone().then(result => console.log(result));
    }
  }

四、async await语法糖获取结果（简单了解）

1. methods: {} 中定义手机号的验证函数 async verifyPhone()

    async verifyPhone() {
      let result = /^1[3456789]\d{9}$/.test(this.phoneNum)
      if (result) {
        let response = await this.axios.post('/api/users/register', { phone: this.phoneNum })
        if (response.data.code == 201) {
          this.phoneInfo = `<i class="iconfont" style="color: red;">&#xe695;</i> 该手机号已被注册`
          result = false
        } else {
          this.phoneInfo = `<i class="iconfont" style="color: green;">&#xe61a;</i>`
        }
      } else {
        this.phoneInfo = `<i class="iconfont" style="color: red;">&#xe695;</i> 手机号格式不正确`
      }
      // console.log('last:' + result)
      return result
    }

2. watch: {}中监听 this.phoneNum 的变化执行this.verifyPhone()

  watch: {
    async phoneNum() {
      console.log(await this.verifyPhone());
    }
  }