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. asyncawait 的工作原理

  • 当执行 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跳转

相关推荐
whltaoin5 天前
Java 网络请求 Jar 包选型指南:从基础到实战
java·http·okhttp·网络请求·retrofit
华农第一蒟蒻6 天前
谈谈跨域问题
java·后端·nginx·安全·okhttp·c5全栈
一直向钱7 天前
android 基于okhttp的socket封装
android·okhttp
linuxxx1107 天前
ajax回调钩子的使用简介
okhttp
一直向钱8 天前
android 基于okhttp 封装一个websocket管理模块,方便开发和使用
android·websocket·okhttp
linuxxx1109 天前
ajax() 回调函数参数详解
前端·ajax·okhttp
linuxxx11012 天前
ajax与jQuery是什么关系?
ajax·okhttp·jquery
耀耀_很无聊13 天前
12_OkHttp初体验
okhttp
heeheeai13 天前
okhttp使用指南
okhttp·kotlin·教程
啦工作呢15 天前
ES6 promise-try-catch-模块化开发
android·okhttp