标签：console log verifyPhone phoneNum callback Promise result 处理函数 手机号

利用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());
    }
  }

标签：console,log,verifyPhone,phoneNum,callback,Promise,result,处理函数,手机号
来源： https://www.cnblogs.com/CarlaZhou/p/15011772.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。