异步101 —— 一个视频看遍小程序使用的异步处理方式

304 阅读3分钟
原文链接: mp.weixin.qq.com

今天的课程,我们来学习小程序的异步处理

在使用 JavaScript 进行开发的时候,不可避免会遇到异步和同步的问题,今天我们来看一看小程序中的异步处理。

首先,我们需要了解一下为什么会是异步的?

这主要是由于 JavaScript 只有一个主线程,和多个辅助线程,为了执行程序不会使主线程被阻塞掉,因此 JavaScript 借助辅助线程,来实现了大量的异步函数。在小程序中,也存在了大量的异步函数。

那么,到底什么是异步,什么是同步呢?非常简单

异步:如果在函数A返回的时候,调用者还不能够得到预期结果,而是需要在将来通过一定的手段得到,那么这个函数就是异步的。 同步:如果在函数A返回的时候,调用者就能够得到预期结果(即拿到了预期的返回值或者看到了预期的效果),那么这个函数就是同步的。

也就是说,如果一个函数可以马上拿到预期的结果,他就是同步的,如果无法马上拿到预期结果,他就是异步的。

比如说,下面这段代码,如果 a 是一个异步函数,则  console.log  打印出来的结果可能不是我们想要的结果,

let result = a();console.log(result)  // undefined

与之对应的,下面这段代码可以直接拿到对应的 result ,则函数 b 是一个同步的函数。

let result = b();console.log(result) // 1

在小程序中存在了大量的异步和同步函数,如果做一个简单的分类,我们可以这样看:

异步函数:需要设置 success,fail,complete 的函数 同步函数:JavaScript 中本身的同步函数和一些以 Sync 结尾的函数。

在了解了基本的同步和异步以后,我们可以来看一看常见的异步处理,主要是三类:

  1. 回调形式(Callback)

  2. Promise 形式

  3. Async/Await 形式

首先,我们先看一看回调形式,回调是我们最常见的异步处理方式,调用函数时,需要传入一个回调函数,以函数执行完成后调用。这个回调函数会在执行完函数本身后调用。我们在小程序中的传入的 success,fail,compete 都是回调函数。

下面这段代码中 success 就传入了一个回调函数我们可以在回调函数内获取到函数的执行结果,并执行下一步操作。

wx.authorize({        scope: 'scope.userInfo',        success: function(res){            console.log(res)        }     })

Promise 形式是一种新的处理异步的方式,可以简化代码,实现链式的调用。在使用时,Promise 提供两个方法,then 和 catch。其中,then 负责函数执行成功后的返回,而 catch 负责函数执行失败后的返回。

下面这段代码择展示了promise 的使用方法。

let db = wx.cloud.databse();db.collection('test')     .count().then(function(res) => {        console.log(res)      })

Async/Await 是最新的异步处理的方式,使用 async/await 可以将异步的代码,当成同步的代码来进行处理。

下面这段代码演示了 Async/Await 的使用方法。

async function getData(){    let db = wx.database()    let result = await db.collection("test").count();    console.log(result)}

我们需要注意的是,await 必须放在函数体声明了 async 的函数中才可以

最后,我们来看一看如何将一个 Callback 风格的函数包装成为一个 Promise 风格的函数。封装的时候需要需要,我们封装的函数需要返回一个 Promise 对象,而返回的这个 Promise 对象有两个参数,一个是 reslove 函数,用于在内部函数执行成功时调用。而 reject 函数则是在内部函数执行失败时调用。

你可以通过看下面的这个例子来理解。

function promiseLogin(){    return new Promise((reslove,reject) => {        wx.login({            success:function(res){                reslove(res)            },            fail: function(err){                reject(err)            }        })    })}

具体的讲解你可以点击本文顶部视频来学习。长按下方二维码,回复“异步101”可以获取到本次课程的 PPT。