美文网首页
async await promise处理异步

async await promise处理异步

作者: MAYDAY77 | 来源:发表于2019-11-05 19:50 被阅读0次

今天有这样一个需求,通过省份编码请求接口获取城市列表,我把http请求数据写在getCiteByNum方法里,把请求的数据return了,但是调用方法接收数据为undefined。

代码如下:

505行代码 getCityByNum方法

由于接口请求数据是异步操作,方法调用接收值会出现undefined情况,所以要解决这个疑难杂症。

贴出正确处理的代码:

//接收方法调用的最终值

this.initData(this.portACode).then(result => {

        console.log(result); // 3、最后输出

        this.portACityList = result;

  });

//通过async await处理请求接口返回的数据

  async initData(code) {

    const data = await this.getCiteByNum(code);

    console.log(data); // 2、然后输出

    return data.data;

  }

//请求接口使用promise

  getCiteByNum (code) {

    const requestData = this.https._get(`${this.urlShparm}/query/city?provinceId=${code}`).toPromise();

    console.log(requestData);     // 1、最先输出

    return requestData;

  }

代码执行顺序如下:

经过改造,代码可以进一步优化

这样拿到的this.portACityList就不会出现undefined的情况了。

报了加班餐,吃完再肥家吧~

相关文章

  • Promise和async/await

    Promise和async/await都是异步处理的方法。async/await看起来更简单易用。 Promise...

  • async/await和Promise杂谈

    前言 Promise和async/await是当前前端最常见的异步程序处理方式,async/await是基于Pro...

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • async,await,promise.all()简单描述

    async,await,promise.all()应用简单的描述,同步处理异步,await字面意思等待。首先三个p...

  • Async/Await VS Promise

    Async/Await VS Promise Async/await 是一种编写异步代码的新方法。之前异步代码的方...

  • 一次性搞懂 Promise、async await 与 Gene

    学习 ES6 的时候,经常听到 Promise、async await 与 Generator 用来处理异步函数,...

  • Promise和async\await

    回调函数 用来处理异步问题,例如发送Ajax,setTimeout等 Promise 封装的例子 async\await

  • 2019-03-06

    1.行文思路 JS中处理异步 由callback->promise->generater->async/await...

  • 总结知识点

    1:promise解决了回调地狱和异步async和await var promise = new Promise(...

  • async / await

    async / await 优缺点 async 和 await 相比直接使用 Promise 来说,优势在于处理 ...

网友评论

      本文标题:async await promise处理异步

      本文链接:https://www.haomeiwen.com/subject/gpwrbctx.html