fix: use xhr instead of the fetch api (#56)

* fix: use xhr instead of the fetch api
zhihu · Apr 3, 2019 · 267b56a · 267b56a
1 parent 110a612
commit 267b56a
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 24 deletions.
diff --git a/example/fmp4/index.js b/example/fmp4/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

diff --git a/example/hls/index.js b/example/hls/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

diff --git a/example/inline/index.js b/example/inline/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

diff --git a/example/main/index.js b/example/main/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

diff --git a/example/mp4/index.js b/example/mp4/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable import/named */
 import '@babel/polyfill'
 import 'raf/polyfill'
-import 'whatwg-fetch'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'

diff --git a/example/package.json b/example/package.json
@@ -14,8 +14,7 @@
     "raf": "^3.4.1",
     "react": "16.4.2",
     "react-dom": "16.4.2",
-    "react-hot-loader": "^4.3.12",
-    "whatwg-fetch": "^3.0.0"
+    "react-hot-loader": "^4.3.12"
   },
   "devDependencies": {
     "@zhihu/babel-preset": "^1.7.0",

diff --git a/packages/griffith-mp4/src/fetch.js b/packages/griffith-mp4/src/fetch.js
@@ -3,33 +3,39 @@ export default class FragmentFetch {
 
   constructor(url, start, end, callback) {
     this.start = start
-    this.controller = new AbortController()
     FragmentFetch.queue.push(this)
-    return fetch(url, {
-      headers: {
-        Range: `bytes=${start}-${end}`,
-      },
-      signal: this.controller.signal,
-    })
-      .then(res => {
-        callback(res.arrayBuffer())
-        this.remove()
-      })
-      .catch(() => {
-        this.remove()
-      })
+
+    const xhr = new XMLHttpRequest()
+    this.xhr = xhr
+    xhr.open('get', url)
+    xhr.responseType = 'arraybuffer'
+    xhr.setRequestHeader('Range', `bytes=${start}-${end}`)
+    xhr.onload = () => {
+      if (xhr.status === 200 || xhr.status === 206) {
+        callback(xhr.response)
+      }
+      this.remove()
+    }
+    xhr.send()
+
+    xhr.onerror = () => {
+      this.remove()
+    }
+    xhr.onabort = () => {
+      this.remove()
+    }
   }
 
   remove = () => {
     FragmentFetch.queue = FragmentFetch.queue.filter(
-      item => item.start !== this.statr
+      item => item.start !== this.start
     )
   }
 
   static clear() {
     while (FragmentFetch.queue.length) {
       const item = FragmentFetch.queue.shift()
-      item.controller.abort()
+      item.xhr.abort()
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -10366,7 +10366,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
+whatwg-fetch@>=0.10.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==