使用Promise优雅加载远程资源
使用Promise优雅加载远程资源
张晓衡
发布于 2020-05-06 11:43:09
发布于 2020-05-06 11:43:09
摘要
CocosCreator 有着 cc.loader.load 这个远程加载能力，如何优雅的去完成这个任务呢？KUOKUO 通过一个小例子带你感受一下 Promise 的魅力。
正文
使用版本
CocosCreator 版本 2.2.2
回调写法
在我的之前的博客中，关于音频资源加载，我是这样写的：
/** 缓存所有音频资源 */
public preLoadAllAudioClips (callback: (progress: number, isCompleted: boolean) => void) {
/** 加载代码，参数为 url，资源类型，进度回调，完成回调 */
cc.loader.loadResDir(AudioClipManager.audioClipsUrl, cc.AudioClip, (completedCount, totalCount, item) => {
// 计算进度
let progress = (completedCount / totalCount) * 100
// 执行回调返回进度
callback(progress, false)
// 打印一下
cc.log(`缓存音频资源中: {completedCount}/{totalCount}`)
}, (error, audioClips, urls) => {
// 错误处理
if (error) {
cc.error(error)
return
}
// 执行回调返回进度
callback(100, true)
cc.log('缓存完毕!')
})
}
在调用时我们要传入 callBack 回调。那么有没有更优雅的写法呢，最好能一行一行执行，同步的那种？当然！
Promise、await与async
在只使用 promise 时，我们可以使用 then 来知道异步结束，这比回调写法舒适一些，但还没达到优雅：
new Promise((resolve, reject) => {
// 异步操作
resolve('ok')
})
.then((res) => {
// 异步完成
cc.log(res)
})
那么如何使用 await 与 async 呢？很简单，我们先写一个 LoadManager 单例：
/** 资源加载单例 */
export class LoadManager {
private static instance: LoadManager
/** 构造函数私有化 */
private constructor () {
}
public static getInstance (): LoadManager {
if (!this.instance) {
this.instance = new LoadManager()
}
return this.instance
}
}
然后写一个方法，用 promise 包装下 cc.loader.load：
/** 异步加载 */
public loadAudioClipByURL (url: string): Promise<cc.AudioClip | undefined> {
return new Promise((resolve, reject) => {
cc.loader.load(url, (err, clip: cc.AudioClip) => {
if (err) {
resolve(undefined)
}
resolve(clip)
})
})
}
这样我们传入远程音频的 url，就可以实现音频加载了。然后我们新建个测试脚本，onClick 方法绑到了一个按钮上：
import { LoadManager } from "./LoadManager"
const {ccclass, property} = cc._decorator
@ccclass
export default class Test extends cc.Component {
loadManager: LoadManager
onLoad () {
this.loadManager = LoadManager.getInstance()
}
// 在 async 方法内，可以使用 await 异步等待操作
async onClick () {
const url = 'http://m10.music.126.net/20200331200937/9e178ed8dbdb051bf6ae5d78df4e637d/ymusic/0758/550f/545f/028d3b9421be8425d60dc57735cf6ebc.mp3'
cc.log('准备下载')
const clip = await this.loadManager.loadAudioClipByURL(url)
cc.log('下载情况', clip)
clip && cc.audioEngine.playMusic(clip, false)
}
}
悦耳的音乐响起，搞定！说明下这个代码：
clip && cc.audioEngine.playMusic(clip, false)这行代码是先判断 clip 是否为空，不为空会向右执行。等价于：
if (clip) {
cc.audioEngine.playMusic(clip, false)
}实际测试
我们改错一下 url，看看加载失败的情况：
结语
文章有没有带给你收获呢！O(∩_∩)O~~
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 Creator星球游戏开发社区 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。