擁抱ES6——阿里云OSS推出JavaScript SDK

IssacWhiteh 10年前發布 | 23K 次閱讀 OSS JavaScript開發 JavaScript

JavaScript作為當下最火的語言（之一），結合OSS能夠創建出非常豐富的跨前后端的應用。現在，OSS正式推出JavaScript SDK，使用OSS的 前后端 同學都可以方便地使用。

OSS JavaScript SDK基于ali-oss開發，感謝@fengmk2和@dead-horse的指導，增加了許多功能并修復了一些bug，主要包括：

支持在瀏覽器環境中使用
支持分片上傳（multipart）
支持STS臨時授權
修復若干bug

詳見：https://github.com/ali-sdk/ali-oss/blob/master/History.md#400–2016-01-22

ES6

首先，什么是ES6？

擁抱ES6——阿里云OSS推出JavaScript SDK

其實ES6是最新版本的ECMAScript，也就是JavaScript標準。

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. > ES6 is a significant update to the language…

ES6包含了眾多重要的更新，但是今天對我們最重要的就是Generator Function，因為它可以讓我們用同步的方式寫異步代碼：

var creds = yield  applySTSToken();
var client = new OSS(creds);
var result = yield client.list();
console.log(result);

上面的代碼包含了兩個異步的操作，applySTSToken和list，如果沒有generator，我們就需要在applySTSToken的callback中做list，然后在list的callback中做log，比如這樣：

applySTSToken(function (creds) {
  var client = new OSS(creds);
  client.list(function (result) {
    console.log(result);
  });
});

如果上面的代碼看起來也“還可以”的話，那么當異步操作多起來之后，再考慮錯誤處理的場景，代碼將會變得非常復雜。不得不說callback很鍛煉大腦，但是有高科技為什么不利用呢？

這看起來不錯，但是如何實現的呢？這篇文章介紹了如何實現Promise（這真是個好名字）。最關鍵的地方就是yield讓控制流跳轉到其他代碼執行，相應的事件(callback)發生時，通過next讓控制流回到上次yield的地方繼續執行，這樣就達到了“異步非阻塞”的效果。

目前主流的Chrome/Firefox版本都已經支持ES6的大部分功能了。主流的Safari版本和移動端瀏覽器目前還不支持ES6，但是我們后面會講到如何做兼容性轉換。

功能

SDK目前支持OSS的絕大部分功能，包括上傳/下載文件、分片上傳、Bucket管理、文件管理等，常用的上傳/下載也有多樣的玩法：

上傳本地文件
上傳Buffer內容
流式上傳
分片上傳
下載到本地文件
流式下載

安裝

npm install ali-oss co

上傳文件

使用put接口上傳一個Object：

var OSS = require('ali-oss');
var co = require('co');
var fs = require('fs');

var client = new OSS({
  accessKeyId: 'access key id',
  accessKeySecret: 'access key secret',
  region: 'oss-cn-hangzhou',
  bucket: 'my-bucket',
});

co(function* () {
  // put from local file
  yield client.put('file', '/tmp/x');

  // put from Buffer
  yield client.put('buffer', new Buffer('hello world'));

  // put from Stream
  yield client.put('stream', fs.createReadStream('/tmp/x'));
}).catch(function (err) {
  console.log(err);
});

下載文件

使用get和getStream方法下載文件：

co(function* () {
  // get as content
  var result = yield client.get('object');
  console.log(result.content);

  // download as file
  yield client.get('object', '/tmp/x');

  // pipe to stream
  yield client.get('object', fs.createWriteStream('/tmp/x'));

  // get as stream
  var result = yield client.getStream('object');
  result.stream.pipe(fs.createWriteStream('/tmp/y'));
}).catch(function (err) {
  console.log(err);
});

管理Bucket

使用putBucketLifecycle等接口來設置Bucket的屬性。注意，目前OSS不支持Bucket相關的跨域請求，所以在瀏覽器中不能使用Bucket的管理接口。

co(function* () {
  var result = yield client.putBucketLifecycle('bucket', 'region', [
    {
      id: 'delete after one day',
      prefix: 'logs/',
      status: 'Enabled',
      days: 1
    },
    {
      prefix: 'logs2/',
      status: 'Disabled',
      date: '2022-10-11T00:00:00.000Z'
    }
  ]);
}).catch(function (err) {
  console.log(err);
});

HTTP Headers

SDK的每個方法都可以設置和獲取HTTP Headers：

co(function* () {
  // set headers
  var result = yield client.put('object', '/tmp/x', {
    headers: {
      'content-type': 'application/javascript; charset=utf8'
    }
  });

  // get headers
  console.log(result.res.headers);
}).catch(function (err) {
  console.log(err);
});

前端后端

Browserify, Babel等優秀工具的出現，使得我們能夠在前后端共用一套代碼。OSS JavaScript SDK基于Node.js開發，通過Browserify和Babel產生適用于瀏覽器的代碼，使得OSS JavaScript SDK同時支持在瀏覽器中和Node.js環境中使用。

在瀏覽器中使用

用戶在瀏覽器中使用SDK時，首先在<head>標簽中包含如下<script>標簽：

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.1.4.min.js"></script>

就可以在代碼中使用OSS對象：

<script type="text/javascript">
  var client = new OSS({
    region: '<oss region>',
    accessKeyId: '<Your accessKeyId(STS)>',
    accessKeySecret: '<Your accessKeySecret(STS)>',
    stsToken: '<Your securityToken(STS)>',
    bucket: '<Your bucket name>'
  });

  OSS.co(function* () {
    var result = yield client.list({
      'max-keys': 10
    });
    console.log(result);
  }).catch(function (err) {
    console.log(err);
  });
</script>

注意：上面的代碼中用OSS.co代替co，同樣的，如果用到了Buffer，也要使用OSS.Buffer代替。browser.js中顯示了SDK暴露給瀏覽器的全部對象。

我們提供一個demo，使用OSS JavaScript SDK開發了一個瀏覽器應用，提供上傳文件/上傳文本/列出文件/下載文件四個功能，效果如下：

擁抱ES6——阿里云OSS推出JavaScript SDK

Build SDK

只需要在SDK的代碼目錄執行npm run build-dist命令，就可以生成用于瀏覽器的SDK lib：

git clone https://github.com/ali-sdk/ali-oss.git
cd ali-oss
npm install
npm run build-dist
# output
# dist/aliyun-oss-sdk.js
# dist/aliyun-oss-sdk.min.js

Build用戶代碼

上述的例子中使用SDK的代碼使用了function*和yield等ES6的特性，這在支持ES6的瀏覽器（主流版本的Chrome/Firefox）中可以直接運行，若要用于更多的瀏覽器，則需要使用Browserify和Babel進行兼容性轉換：

npm install -g browserify
npm install babelify babel-preset-es2015
echo '{ "presets": ["es2015"] }' > .babelrc
browserify app.js -t babelify > app-babel.js

轉換后只需要在<script>標簽中包含轉換后的代碼文件即可：

<script src="app-babel.js"></script>

發布

在SDK的開發過程中，每發布一個版本，我需要手動做以下幾件事情：

修改ChangeLog
修改package.json中的版本
生成版本的tag
生成dist/aliyun-oss-sdk.min.js
發布到npm
aliyun-oss-sdk.min.js發布到cdn

這么多步驟，不出錯是幾乎不可能的。所以我們使用git-extras和git-pre-hooks，讓發布過程變成"All-in-One"，具體參考package.json。

首先確保在master分支，然后npm依賴都安裝好了：

git checkout master
npm install

發布過程：

vi package.json and change "version" to 4.2.0
git changelog -n -t 4.2.0
git release 4.2.0

是不是如絲般順滑？

github（歡迎Star/Fork/PR）: https://github.com/ali-sdk/ali-oss
API文檔：https://github.com/ali-sdk/ali-oss#summary
SDK文檔：https://help.aliyun.com/document_detail/oss/sdk/javascript-sdk/install.html

來自：http://cnodejs.org/topic/56ab1c0526d02fc6626bb383

本文由用戶 IssacWhiteh 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1462601319997.html

OSS JavaScript開發 JavaScript

擁抱ES6——阿里云OSS推出JavaScript SDK

ES6

功能

安裝

上傳文件

下載文件

管理Bucket

HTTP Headers

前端后端

在瀏覽器中使用

Build SDK

Build用戶代碼

發布

相關經驗

相關資訊

相關文檔

目錄