摘要

CocosCreator 有着 cc.loader.load 这个远程加载能力，如何优雅的去完成这个任务呢？KUOKUO 通过一个小例子带你感受一下 Promise 的魅力。

正文

使用版本

CocosCreator 版本 2.2.2

回调写法

在我的之前的博客中，关于音频资源加载，我是这样写的：

  1. /** 缓存所有音频资源 */

  2. public preLoadAllAudioClips (callback: (progress: number, isCompleted: boolean) => void) {

  3. /** 加载代码，参数为 url，资源类型，进度回调，完成回调 */

  4. cc.loader.loadResDir(AudioClipManager.audioClipsUrl, cc.AudioClip, (completedCount, totalCount, item) => {

  5. // 计算进度

  6. let progress = (completedCount / totalCount) * 100

  7. // 执行回调返回进度

  8. callback(progress, false)

  9. // 打印一下

  10. cc.log(`缓存音频资源中: ${completedCount}/${totalCount}`)

  11. }, (error, audioClips, urls) => {

  12. // 错误处理

  13. if (error) {

  14. cc.error(error)

  15. return

  16. }

  17. // 执行回调返回进度

  18. callback(100, true)

  19. cc.log('缓存完毕!')

  20. })

  21. }

在调用时我们要传入 callBack 回调。那么有没有更优雅的写法呢，最好能一行一行执行，同步的那种？当然！

Promise、await与async

在只使用 promise 时，我们可以使用 then 来知道异步结束，这比回调写法舒适一些，但还没达到优雅：

  1. new Promise((resolve, reject) => {

  2. // 异步操作

  3. resolve('ok')

  4. })

  5. .then((res) => {

  6. // 异步完成

  7. cc.log(res)

  8. })

那么如何使用 await 与 async 呢？很简单，我们先写一个 LoadManager 单例：

  1. /** 资源加载单例 */

  2. export class LoadManager {

  3.  

  4. private static instance: LoadManager

  5.  

  6. /** 构造函数私有化 */

  7. private constructor () {

  8. }

  9.  

  10. public static getInstance (): LoadManager {

  11. if (!this.instance) {

  12. this.instance = new LoadManager()

  13. }

  14. return this.instance

  15. }

  16.  

  17. }

然后写一个方法，用 promise 包装下 cc.loader.load：

  1. /** 异步加载 */

  2. public loadAudioClipByURL (url: string): Promise<cc.AudioClip | undefined> {

  3. return new Promise((resolve, reject) => {

  4. cc.loader.load(url, (err, clip: cc.AudioClip) => {

  5. if (err) {

  6. resolve(undefined)

  7. }

  8. resolve(clip)

  9. })

  10. })

  11. }

这样我们传入远程音频的 url，就可以实现音频加载了。然后我们新建个测试脚本，onClick 方法绑到了一个按钮上：

  1. import { LoadManager } from "./LoadManager"

  2.  

  3. const {ccclass, property} = cc._decorator

  4.  

  5. @ccclass

  6. export default class Test extends cc.Component {

  7.  

  8. loadManager: LoadManager

  9.  

  10. onLoad () {

  11. this.loadManager = LoadManager.getInstance()

  12. }

  13.  

  14. // 在 async 方法内，可以使用 await 异步等待操作

  15. async onClick () {

  16. const url = 'http://m10.music.126.net/20200331200937/9e178ed8dbdb051bf6ae5d78df4e637d/ymusic/0758/550f/545f/028d3b9421be8425d60dc57735cf6ebc.mp3'

  17. cc.log('准备下载')

  18. const clip = await this.loadManager.loadAudioClipByURL(url)

  19. cc.log('下载情况', clip)

  20. clip && cc.audioEngine.playMusic(clip, false)

  21. }

  22.  

  23. }

悦耳的音乐响起，搞定！说明下这个代码：

  1. clip && cc.audioEngine.playMusic(clip, false)

这行代码是先判断 clip 是否为空，不为空会向右执行。等价于：

  1. if (clip) {

  2. cc.audioEngine.playMusic(clip, false)

  3. }

实际测试

使用Promise优雅加载远程资源_加载

我们改错一下 url，看看加载失败的情况：

使用Promise优雅加载远程资源_加载_02

结语

文章有没有带给你收获呢！O(∩_∩)O~~

微信公众号

使用Promise优雅加载远程资源_d3_03