异步处理(前端面试)

Promise

1:使用promise原因

tex 复制代码
了解回调地狱【什么是回调地狱】
1:回调地狱是异步获取结果后,为下一个异步函数提供参数,层层回调嵌入回调
2:导致回调层次很深,代码维护特别困难
3:在没有ES6时,是将每一个request【网络请求】封装成一个函数将结果进行返回
tex 复制代码
promise解决问题
1:promise解决异步方法,本质上是一个构造函数,可以用它来实例化一个对象
2:对象身上有resolve,reject,all原型上有then,catch方法
3:promise对象有三种状态:
	(1)pending(初始化状态|进行中)
	(2)resolved|fulfilled(成功状态)
	(3)rejected(失败)
tex 复制代码
promise三种状态
(1)pending
	它的意思是 "待定的,将发生的",相当于是一个初始状态。创建Promise对象时,且没有调用resolve或者是reject方法,相当于是初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。
(2)resolved
	表示解决了,就是说这个承诺实现了。 要实现从pending到resolved的转变,需要在 创建Promise对象时,在函数体中调用了resolve方法 。
(3)rejected
	拒绝,失败。表示这个承诺没有做到,失败了。要实现从pending到rejected的转换,只需要在创建Promise对象时,调用reject函数。

2:代码

js 复制代码
//promise链式调用
this.getNav().then(res=>{
  let id=res.data[0].id;
  return this.getArticle(id);
}).then(res=>{
  let id=res.data[0].id;
  return this.getComment(id)
}).then(res=>{
  console.log(res)
}) 
js 复制代码
methods: {
    //先获取导航分类接口,将结果进行返回,到调用函数的地方获取
    getNav(callback){
      return new Promise((resolve,reject)=>{
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
          success:res=>{
            resolve(res)
          },
          fail:err=>{
            reject(err)
          }
        })
      })
    },


    //获取文章数据,将文章列表进行返回
    getArticle(id){
      return new Promise((resolve,reject)=>{
        uni.request({
          url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
          data:{
            cid:id
          },
          success:res=>{
            resolve(res)
          },
          fail:err=>{
            reject(err)
          }
        })
      })
    },

      //获取文章下的所有评论
      getComment(id){
        return new Promise((resolve,reject)=>{
          uni.request({
            url:"https://ku.qingnian8.com/dataApi/news/comment.php",
            data:{
              aid:id
            },
            success:res=>{
              resolve(res)
            },
            fail:err=>{
              reject(err)
            }
          })
        })
} 

async | await异步处理同步化

1:使用概念

tex 复制代码
1:async|await是成对出现
2:只使用await而函数中没有使用async命令,会出现报错
3:直接使用async命令,没有使用await,返回的函数是一个promise【没有实际意义】
4:async修饰函数,await是添加在调用函数的部分前
	该命令的含义是:得等这一行异步方法执行成功后,将返回值赋值给res变量,才可以走下一行代码
5:将原来的异步编程改为同步编程【异步处理同步化】

2:代码

js 复制代码
async onLoad() {
  let id,res;
  res=await this.getNav();
  id=res.data[0].id;
  res=await this.getArticle(id);
  id=res.data[0].id;
  res=await this.getComment(id);
  console.log(res)
} 

3:同步与异步

tex 复制代码
同步
1:js代码实际上是单线程程序,代码按顺序一行一行执行
2:如果在同步编程中发送网络请求【请求超时】,下面代码依赖网络请求,那么整个网页会失去响应
tex 复制代码
异步
1:一个异步过程的执行不在于原有的序列顺序有关
2:发送网络请求【不确定响应时间,异步是最优选】,程序不在此等待,直接走下面代码,等异步请求有响应,自主完成回调后续操作,程序之间互不影响

ps
	(1)同步按顺序执行,异步不按顺序执行,异步执行效率高
	(2)如果涉及到网络请求没有依赖关系的话,异步请求是效率最高的,但是下一个的方法依赖于上一个网络请求的结果,那么久必须使用await命令,将异步结果等待返回之后再执行后面的代码。
相关推荐
zmirror5 小时前
Monorepo单仓多包&独立部署
前端
Linsk5 小时前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化
Asort5 小时前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式
over6975 小时前
AI科技新闻速览自动化:使用n8n工作流打造个人AI助手
前端
一枚前端小能手5 小时前
🔄 重学Vue之nextTick和slot - 从底层实现到实战应用的完整指南
前端·javascript·vue.js
Zyx20076 小时前
HTML5 敲击乐(2):从静态页面到移动端适配的完整实践
前端
今禾6 小时前
流式输出深度解析:从应用层到传输层的完整技术剖析
前端·http·面试
Hilaku6 小时前
一个函数超过20行? 聊聊我的函数式代码洁癖
前端·javascript·架构
karry_k6 小时前
Redis如何搭建搭建一主多从?
后端·面试