optimize danmaku request

package.json

@@ -55,6 +55,7 @@
     "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
+    "axios": "0.18.0",
     "balloon-css": "^0.5.0",
     "mini-css-extract-plugin": "0.4.0",
     "promise-polyfill": "8.0.0",

src/js/api.js

@@ -1,54 +1,41 @@
-/*
- * xhr.status ---> fail
- * response.code === 0 ---> success
- * response.code !== 0 ---> error
- * */
-
-const SendXMLHttpRequest = (url, data, success, error, fail) => {
-    const xhr = new XMLHttpRequest();
-
-    xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4) {
-            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
-                const response = JSON.parse(xhr.responseText);
-
-                if (response.code !== 0) {
-                    return error(xhr, response);
-                }
-
-                return success(xhr, response);
-            }
-
-            fail(xhr);
-        }
-    };
-
-    xhr.open(data !== null ? 'POST' : 'GET', url, true);
-    xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
-    xhr.send(data !== null ? JSON.stringify(data) : null);
-};
+import axios from 'axios';
 
 export default {
-    send: (endpoint, danmakuData, callback) => {
-        SendXMLHttpRequest(endpoint, danmakuData, (xhr, response) => {
-            console.log('Post danmaku: ', response);
-            if (callback) {
-                callback();
-            }
-        }, (xhr, response) => {
-            alert(response.msg);
-        }, (xhr) => {
-            console.log('Request was unsuccessful: ' + xhr.status);
-        });
+    send: (options) => {
+        axios.post(options.url, options.data).
+            then((response) => {
+                const data = response.data;
+                if (!data || data.code !== 0) {
+                    options.error && options.error(data && data.msg);
+                    return;
+                }
+                options.success && options.success(data);
+            }).
+            catch((e) => {
+                console.error(e);
+                options.error && options.error();
+            });
     },
 
-    read: (endpoint, callback) => {
-        SendXMLHttpRequest(endpoint, null, (xhr, response) => {
-            callback(null, response.data);
-        }, (xhr, response) => {
-            callback({ status: xhr.status, response });
-        }, (xhr) => {
-            callback({ status: xhr.status, response: null });
-        });
+    read: (options) => {
+        axios.get(options.url).
+            then((response) => {
+                const data = response.data;
+                if (!data || data.code !== 0) {
+                    options.error && options.error(data && data.msg);
+                    return;
+                }
+                options.success && options.success(data.data.map((item) => ({
+                    time: item[0],
+                    type: item[1],
+                    color: item[2],
+                    author: item[3],
+                    text: item[4]
+                })));
+            }).
+            catch((e) => {
+                console.error(e);
+                options.error && options.error();
+            });
     }
 };

src/js/danmaku.js

@@ -57,38 +57,28 @@ class Danmaku {
     _readAllEndpoints (endpoints, callback) {
         const results = [];
         let readCount = 0;
-        const cbk = (i) => (err, data) => {
-            ++readCount;
-            if (err) {
-                if (err.response) {
-                    this.options.error(err.response.msg);
-                }
-                else {
-                    this.options.error('Request was unsuccessful: ' + err.status);
-                }
-                results[i] = [];
-            }
-            else {
-                if (data) {
-                    results[i] = data.map((item) => ({
-                        time: item[0],
-                        type: item[1],
-                        color: item[2],
-                        author: item[3],
-                        text: item[4]
-                    }));
-                }
-                else {
-                    results[i] = [];
-                }
-            }
-            if (readCount === endpoints.length) {
-                return callback(results);
-            }
-        };
 
         for (let i = 0; i < endpoints.length; ++i) {
-            this.options.apiBackend.read(endpoints[i], cbk(i));
+            this.options.apiBackend.read({
+                url: endpoints[i],
+                success: (data) => {
+                    results[i] = data;
+
+                    ++readCount;
+                    if (readCount === endpoints.length) {
+                        callback(results);
+                    }
+                },
+                error: (msg) => {
+                    this.options.error(msg || this.options.tran('Danmaku load failed'));
+                    results[i] = [];
+
+                    ++readCount;
+                    if (readCount === endpoints.length) {
+                        callback(results);
+                    }
+                },
+            });
         }
     }
 
@@ -102,7 +92,14 @@ class Danmaku {
             color: dan.color,
             type: dan.type
         };
-        this.options.apiBackend.send(this.options.api.address + 'v3/', danmakuData, callback);
+        this.options.apiBackend.send({
+            url: this.options.api.address + 'v3/',
+            data: danmakuData,
+            success: callback,
+            error: (msg) => {
+                this.options.error(msg || this.options.tran('Danmaku send failed'));
+            },
+        });
 
         this.dan.splice(this.danIndex, 0, danmakuData);
         this.danIndex++;

src/js/i18n.js

@@ -38,7 +38,9 @@ const tranTxt = {
         'Set danmaku color': '设置弹幕颜色',
         'Set danmaku type': '设置弹幕类型',
         'Show danmaku': '显示弹幕',
-        'This video fails to load': '视频加载失败',
+        'Video load failed': '视频加载失败',
+        'Danmaku load failed': '弹幕加载失败',
+        'Danmaku send failed': '弹幕发送失败',
         'Switching to': '正在切换至',
         'Switched to': '已经切换至',
         'quality': '画质',
@@ -75,7 +77,9 @@ const tranTxt = {
         'Set danmaku color': '設置彈幕顏色',
         'Set danmaku type': '設置彈幕類型',
         'Show danmaku': '顯示彈幕',
-        'This video fails to load': '視頻加載失敗',
+        'Video load failed': '視頻加載失敗',
+        'Danmaku load failed': '彈幕加載失敗',
+        'Danmaku send failed': '彈幕發送失敗',
         'Switching to': '正在切換至',
         'Switched to': '已經切換至',
         'quality': '畫質',

src/js/player.js

@@ -106,7 +106,8 @@ class DPlayer {
                     addition: this.options.danmaku.addition,
                     user: this.options.danmaku.user,
                 },
-                events: this.events
+                events: this.events,
+                tran: (msg) => this.tran(msg),
             });
 
             this.comment = new Comment(this);
@@ -434,7 +435,7 @@ class DPlayer {
 
         // video download error: an error occurs
         this.on('error', () => {
-            this.tran && this.notice && this.type !== 'webtorrent' & this.notice(this.tran('This video fails to load'), -1);
+            this.tran && this.notice && this.type !== 'webtorrent' & this.notice(this.tran('Video load failed'), -1);
         });
 
         // video end

yarn.lock

@@ -422,6 +422,13 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -2440,6 +2447,12 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+follow-redirects@^1.3.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz#234f49cf770b7f35b40e790f636ceba0c3a0ab77"
+  dependencies:
+    debug "^3.1.0"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "http://registry.npm.taobao.org/for-in/download/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"