当前位置: 首页 > article >正文

async 和 await的使用

一、需求

点击按钮处理重复提交,想要通过disabled的方式实现。

但是点击按钮调用的方法里有ajax、跳转、弹窗等一系列逻辑操作,需要等方法里流程都走完,再把disabled设为false,这样下次点击按钮时就可以继续走方法里的ajax等操作。

ajax请求需要时间返回,需要等返回后才能把disabled设为false,这就要保证点击按钮里的方法是同步执行的;

ajax.then.then的实现方法嵌套的太多,可以使用async 和 await代替,async是异步的,需要靠 await达到同步效果

二、实现

addPaper里的所有操作,不管层级如何,每个都要使用async 和 await,保证代码都是同步执行的;

不是同步执行的话,ajax还没返回,就执行了下面的disabled=false,重复提交时拦截不住的。

保证了代码是同步执行的,就可以在addPaper.then里一个位置将disabled=false,不用在addPaper里每个位置都设置addPaper。

Builder.init({
  disabled:false //初始定义disabled为false,点击按钮时,可以继续执行方法里的操作
})
.method("onItemClick",function(e){
  // disabled=true,表示已经点击此按钮,并且此方法并未执行完成,直接return先不继续执行
  if(this.data.disabled)
  {
    return false;
  }

  this.data.disabled = true //disabled=true,保证下次点击时拦截继续执行
  this.addPaper({jobid:item.JobId,dimensionid:'',interviewtype:1,checkexistinterview:1}).then(function(result){
	// addPaper里使用async和await,保证方法都是同步执行的,这里then方法里将disabled=false,表示点击按钮可以继续执行了
    that.data.disabled = false
  })
}) 


.method("addPaper",async function(args){
  let that = this
  await checkSession.getAppSession().then(async function(sessionKey){
    if(!util.session.signKey)
    {
      await wx.navigateTo({
        url: '/pages/login/login?curjobid='+args.jobid+'&interviewtype='+args.interviewtype+'&dimensionid='+args.dimensionid,
        success:(e)=>{
          that.data.disabled = false
        },
      });
    }
    else
    {
     await that.toAddPaper(args)
    }
  })

 })
 builder.method("toAddPaper", async function (args) {
  let that = this;
  await http.promiseRequest({
    url: "/aivideo/addTempPaper",
    method: "POST",
    data: {},
  }).then(async (result)=>{
  
  });
})

延伸:

ajax是比较友好的一种方式,ajax通过async 和 await是可以实现同步的,addPaper里有wx.navigateTo跳转、微信wx.authorize授权摄像头、wxModel弹窗等时,就需要在addPaper内部在每一个位置添加disabled=false。

1、wx.navigateTo在跳转succes里添加disabled=false

2、wxModel弹窗,因为弹窗出来流程就走完了,直接弹窗位置加上disabled=false即可。

3、wx.authorize,就直接弹出来授权窗口了,在哪里加上disabled=false呢,授权窗口无非就同意和拒绝,在success同意和fail拒绝里加上disabled=false即可

二、原理

asyncawait 是 JavaScript 中用于处理异步操作的关键字,它们让代码更加简洁和易于理解,避免了传统的回调函数(callback)或 .then() 链式调用所带来的复杂性。asyncawait 是基于 JavaScript 的 Promise 的语法。

1. async 函数

async 关键字用来定义一个异步函数,表示该函数内部会有异步操作。异步函数总是返回一个 Promise,即使函数内部没有明确使用 return 返回一个 Promise,JavaScript 会自动把函数返回值包装在一个已解析的 Promise 中。

async function myFunction() {
  return 'Hello, world!';
}

myFunction().then(result => {
  console.log(result); 
});

2. await 表达式

await 关键字只能在 async 函数内部使用,它用于等待一个 Promise 解析(resolve)并返回解析后的结果。如果 await 后面的表达式不是一个 Promise,那么它会自动将其转换为一个已解析的 Promise。

async function fetchData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

fetchData().then(data => {
  console.log(data); // 输出从 API 获取的 JSON 数据
});

3. async 和 await 的工作原理

  • 当执行 await 时,JavaScript 会暂停函数的执行,直到 Promise 解析(resolve)或者拒绝(reject)。
  • 如果 Promise 被成功解析,await 会返回该值,函数会继续执行。
  • 如果 Promise 被拒绝,await 会抛出一个错误(相当于抛出 Promise.reject() 的错误),你可以使用 try...catch 来捕获和处理这个错误。

4. 使用 try...catch 捕获错误

在处理异步操作时,我们通常会使用 try...catch 来捕获潜在的错误(例如网络请求失败等)。

示例
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

5. 组合多个异步操作

你可以在 async 函数中使用多个 await 来依次执行多个异步操作。需要注意的是,await 会按顺序依次等待每个 Promise 完成,这可能导致不必要的延迟。如果有多个独立的异步操作,可以考虑并行执行它们。

示例:依次执行多个异步操作
async function fetchData() {
  let userResponse = await fetch('https://api.example.com/user');
  let userData = await userResponse.json();
  
  let postsResponse = await fetch(`https://api.example.com/posts?userId=${userData.id}`);
  let postsData = await postsResponse.json();
  
  return { userData, postsData };
}

fetchData().then(data => console.log(data));

示例:并行执行多个异步操作

javascript
async function fetchData() {
  let userPromise = fetch('https://api.example.com/user');
  let postsPromise = fetch('https://api.example.com/posts');
  
  let [userResponse, postsResponse] = await Promise.all([userPromise, postsPromise]);
  
  let userData = await userResponse.json();
  let postsData = await postsResponse.json();
  
  return { userData, postsData };
}

fetchData().then(data => console.log(data));

在这个例子中,Promise.all() 会并行执行两个请求,只有在两个请求都完成后,才会继续进行数据解析。这样可以提高效率,避免等待一个请求完成后再去发送另一个请求。

总结

  • async:用来声明异步函数,返回一个 Promise。
  • await:用来等待一个 Promise 被解析,通常与 async 配合使用。
  • 异常处理可以使用 try...catch 捕获和处理。
  • 可以使用 Promise.all() 来并行执行多个异步操作,避免串行执行造成的性能瓶颈。

async/await 使得异步代码的书写更加简洁直观,避免了回调地狱和 .then() 链式调用的层层嵌套,提升了代码的可读性和维护性。

二、wx跳转


http://www.kler.cn/a/397008.html

相关文章:

  • 对接阿里云实人认证
  • C++中特殊类设计/单例模式
  • 计算机视觉 ---常见图像文件格式及其特点
  • TVBox 网络接口
  • 【智能电视??】关于电视、以及IPTV 和OTT TV区别(了解)
  • 【问卷调研】HarmonyOS SDK开发者社区用户需求有奖调研
  • 分别写出在散列表中插入和删除关键字为K的一个记录的算法,设散列函数为H,解决冲突的方法为链地址法。
  • 蓝桥杯模拟
  • 动态规划 —— 子数组系列-乘积为正数的最长子数组长度
  • arkUI:水果选择与管理:基于 ArkUI 的长按编辑功能实现
  • 基于RK3568J多网口电力可信物联网关解决方案
  • leetcode day10 动态规划篇 64+139
  • 通过JS实现下载图片到本地教程分享
  • 23种设计模式-观察者(Observer)设计模式
  • 数据分析-Excel基础操作
  • 变摩擦系数在机械中的应用
  • 蓝队基础5 -- 安全策略与防护技术
  • WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇
  • 代码随想录算法训练营day41|动态规划04
  • [IP组播]IGMP配置实验
  • WebSocket Endpoint端点
  • 【Go语言——数据结构】稀疏数组(SparseArray)
  • AutoUpdater.NET 实现 dotNET应用自动更新
  • paramiko 库实现的暴力破解 SSH 密码
  • 建筑企业新闻稿怎么写?工程行业评职称品牌宣传背书的报纸期刊杂志媒体有哪些
  • 实现 MVC 模式