oss js sdk 异步架构改造

本文涉及的产品
对象存储 OSS,OSS 加速器 50 GB 1个月
简介: oss js sdk 针对js最新的语法和技术进行的异步架构改造

### 背景
随着js的技术变革,es6/7的语法的慢慢普及,并且很多的sdk都开始对新的异步进行支持,因此我们也在开始进行调研,总结目前sdk存在的问题:

  • oss js sdk目前的异步api需要依赖第三方库co
  • api的调用栈很不清晰,定位问题困难,只要是因为这个co库
  • 对于then的异步方式需要一个wrapper来处理
  • issue上反馈了很多用户的诉求

### 结构变化

  • 所有的对外暴露的api方法 由之前的 function* 转变为 async function
  • 需要使用 yeild 的地方均由 await 代替
  • 底层异步全部统一使用Promise / async await形式
  • 修改了部分bucket相关的api方法参数, 详情参考readme

### 改进点
#### 1.使调用栈变得清晰,方便问题的排查。
co调用栈
co调用栈.jpeg
可以看出: 调用栈非常不清晰,太多没有用的 co 相关的调用栈。如果 n 个 generator 层层嵌套,就会出现 n 倍的 (anonymous)->onFullfiled->next->toPromise->co->Promise->(anonymous) 调用栈。如果你读过 co 的源码可能知道,这是 co 将 generator 解包的过程。其实这个可以通过 yield generator -> yield* generator 来解决。
async调用栈
aysnc调用栈.jpeg
可以看出: asyncWrap 中调用了 B 函数,B 函数调用了 A 函数,A 函数中 resolve 了一个值。asyncWrap 中还调用了 stopProfiling 函数。

2.去除了co以及相关的依赖

  • 减少了包的大小, 降低了1~2M
  • 简化了使用

3.回归原生实现方式,兼容性更好

  • 完全按照js es6/7的标准进行的封装
  • 大部分主流浏览器都已经支持

4.初始化client不再需要一个wrapper,直接进行初始化即可

### 使用方式
举个最常用的上传api使用例子,分片上传

const oss = require('ali-oss');

const store = oss({
  accessKeyId: 'your access key',
  accessKeySecret: 'your access secret',
  bucket: 'your bucket name',
  region: 'oss-cn-hangzhou'
});

//async function 进度回调
async function asyncProgress(p, cpt, res) {
    console.log(p);
    console.log(cpt);
    console.log(res.headers['x-oss-request-id']);
}

// 第二个参数是File|Blob
store.multipartUpload('object', 'local-file', {
  progress: asyncProgress
}).then((result) => {
  console.log(result);
});

//function 进度回调
function progress(p, cpt, res) {
    console.log(p);
    console.log(cpt);
    console.log(res.headers['x-oss-request-id']);
}

// 第二个参数是File|Blob
store.multipartUpload('object', 'local-file', {
  progress: progress
}).then((result) => {
  console.log(result);
});

还有其他相关api使用请参考我们的官方文档

### 写在最后

  • 我们会持续跟进js的新技术,选择适合我们的技术并应用到sdk中去。
  • 欢迎随时到github中提issue反馈问题
相关实践学习
对象存储OSS快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
目录
相关文章
|
4月前
|
数据采集 监控 API
移动端性能监控探索:iOS RUM SDK 技术架构与实践
阿里云 RUM SDK 作为一款性能体验监控采集工具,可以作为辅助 App 运维的强有力助手,提升您的问题排查效率。
342 49
|
12月前
|
Web App开发 JavaScript 前端开发
如何在JavaScript中确定异步操作之间的依赖关系?
如何在JavaScript中确定异步操作之间的依赖关系?
464 156
|
存储 人工智能 开发工具
AI助理化繁为简,速取代码参数——使用python SDK 处理OSS存储的图片
只需要通过向AI助理提问的方式输入您的需求,即可瞬间获得核心流程代码及参数,缩短学习路径、提升开发效率。
1782 5
AI助理化繁为简,速取代码参数——使用python SDK 处理OSS存储的图片
|
10月前
|
JavaScript 前端开发 Go
Wasm Client SDK 架构介绍
Wasm Client SDK 架构介绍
408 13
|
9月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
617 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
11月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
11月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您

相关产品

  • 对象存储