Refactor(rest/networkInterface.js) XMLHttpRequest -> fetch

Author: leJsboureau

src/recognizer/rest/iinkRestRecognizer.js

@@ -163,7 +163,7 @@ function resultCallback (recognizerContext, model, configuration, res, mimeType)
     handleSuccess(recognizerContext.editor, modelReference, Constants.EventType.EXPORTED, Constants.EventType.IDLE)
   }
 }
-  
+
 function callPostMessage (recognizerContext, model, mimeType) {
   const configuration = recognizerContext.editor.configuration
   return postMessage('/api/v4.0/iink/batch', recognizerContext, model, buildData, configuration.restConversionState, mimeType)
@@ -184,6 +184,7 @@ function callPostMessage (recognizerContext, model, mimeType) {
  * @param {Array} requestedMimeTypes
  */
 export function export_ (recognizerContext, model, requestedMimeTypes) {
+  const configuration = recognizerContext.editor.configuration
   if (requestedMimeTypes) {
     return Promise.all(requestedMimeTypes.map(mimeType => callPostMessage(recognizerContext, model, mimeType)))
   } else if (configuration.recognitionParams.type === 'TEXT') {
@@ -215,6 +216,6 @@ export function convert (recognizerContext, model) {
  * @param {RecognizerContext} recognizerContext Current recognition context
  * @param {Model} model Current model
  */
-export function resize (recognizerContext, model){
+export function resize (recognizerContext, model) {
   export_(recognizerContext, model)
 }

src/recognizer/rest/networkInterface.js

@@ -2,140 +2,54 @@
 import * as CryptoHelper from '../CryptoHelper'
 
 /**
- * Parse JSON String to Object
- * @param {Object} req JSON string result to be parsed
- * @return {Object} Parsed response
- */
-function parse (req) {
-  let result
-  try {
-    result = JSON.parse(req.responseText)
-  } catch (e) {
-    result = req.responseText
-  }
-  return result
-}
-
-/**
- * Transform object data request to a list of parameters
- * @param {Object} obj Query properties
- * @return {String} URI encoded string
- */
-function transformRequest (obj) {
-  const str = []
-  Object.keys(obj).forEach((p) => {
-    if ((typeof obj[p] !== 'undefined') &&
-        (typeof obj[p] !== 'function')) {
-      str.push(`${encodeURIComponent(p)}=${encodeURIComponent(obj[p])}`)
-    }
-  })
-  return str.join('&')
-}
-
-/**
- * Send request to the network and return a promise
- * @param {String} type Request type (GET/POST)
+ * Post request
+ * @param {RecognizerContext} recognizerContext Recognizer context
  * @param {String} url URL
  * @param {Object} data Data to be sent
- * @param {RecognizerContext} [recognizerContext] Recognizer context
  * @param {String} apiVersion api version
  * @param {String} mimeType MimeType to be used
  * @return {Promise}
  */
-function xhr (type, url, data, recognizerContext = {}, apiVersion, mimeType) {
-  const pptxMimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+export async function post (recognizerContext, url, data, apiVersion, mimeType) {
   const configuration = recognizerContext.editor.configuration
   const recognizerContextRef = recognizerContext
-  return new Promise((resolve, reject) => {
-    // We are writing some browser module here so the no import found should be ignored
-    // eslint-disable-next-line no-undef
-    const request = new XMLHttpRequest()
-    request.open(type, url, true)
-    request.withCredentials = true
-
-    switch (configuration.recognitionParams.type) {
-      case 'TEXT':
-        request.setRequestHeader('Accept', 'application/json,' + mimeType)
-        break
-      case 'MATH':
-        request.setRequestHeader('Accept', 'application/json,' + mimeType)
+  if (recognizerContextRef) {
+    recognizerContextRef.idle = true
+  }
+  try {
+    const headers = new Headers()
+    headers.append('Accept', 'application/json,' + mimeType)
+    headers.append('applicationKey', configuration.recognitionParams.server.applicationKey)
+    headers.append('hmac', CryptoHelper.computeHmac(JSON.stringify(data), configuration.recognitionParams.server.applicationKey, configuration.recognitionParams.server.hmacKey))
+    headers.append('Content-Type', 'application/json')
+    const reqInit = {
+      method: 'POST',
+      headers,
+      credentials: 'include',
+      body: JSON.stringify(data)
+    }
+    const request = new Request(url, reqInit)
+    const response = await fetch(request)
+    const contentType = response.headers.get('content-type')
+    let result = ''
+    switch (contentType) {
+      case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      case 'image/png':
+      case 'image/jpeg':
+        result = await response.blob()
         break
-      case 'DIAGRAM':
-        request.setRequestHeader('Accept', 'application/json,' + mimeType)
+      case 'application/json':
+        result = await response.json()
         break
-      case 'Raw Content':
-        request.setRequestHeader('Accept', 'application/json,' + mimeType)
+      case 'application/vnd.myscript.jiix':
+        result = await response.clone().json().catch(async () => await response.text())
         break
       default:
+        result = await response.text()
         break
     }
-    request.setRequestHeader('applicationKey', configuration.recognitionParams.server.applicationKey)
-    request.setRequestHeader('hmac', CryptoHelper.computeHmac(JSON.stringify(data), configuration.recognitionParams.server.applicationKey, configuration.recognitionParams.server.hmacKey))
-    request.setRequestHeader('Content-Type', 'application/json')
-
-    const isBlobType = mimeType && (mimeType === pptxMimeType || mimeType.startsWith('image/png') || mimeType.startsWith('image/jpeg'))
-    if (isBlobType) {
-      request.responseType = 'blob'
-    }
-
-    request.onerror = () => {
-      // eslint-disable-next-line prefer-promise-reject-errors
-      reject({ msg: `Could not connect to ${url} connection error`, recoverable: false })
-    }
-
-    request.onload = () => {
-      if (request.status >= 200 && request.status < 300) {
-        isBlobType ? resolve(request.response) : resolve(parse(request))
-      } else {
-        reject(new Error(request.responseText))
-      }
-    }
-
-    request.onreadystatechange = () => {
-      if (request.readyState === 4) {
-        if (request.status >= 200 && request.status < 300) {
-          isBlobType ? resolve(request.response) : resolve(parse(request))
-        }
-      }
-    }
-
-    if (recognizerContextRef) {
-      recognizerContextRef.idle = false
-    }
-
-    request.send(JSON.stringify(data))
-  }).then((res) => {
-    if (recognizerContextRef) {
-      recognizerContextRef.idle = true
-    }
-    return res
-  })
-}
-
-/**
- * Get request
- * @param {RecognizerContext} recognizerContext Recognizer context
- * @param {String} url URL
- * @param {Object} params Query properties
- * @return {Promise}
- */
-export function get (recognizerContext, url, params) {
-  let queryUrl = url
-  if (params) {
-    queryUrl += `?${transformRequest(params)}`
+    return result
+  } catch (error) {
+    throw new Error({ msg: `Could not connect to ${url} connection error`, recoverable: false })
   }
-  return xhr('GET', queryUrl, undefined, recognizerContext)
-}
-
-/**
- * Post request
- * @param {RecognizerContext} recognizerContext Recognizer context
- * @param {String} url URL
- * @param {Object} data Data to be sent
- * @param {String} apiVersion api version
- * @param {String} mimeType MimeType to be used
- * @return {Promise}
- */
-export function post (recognizerContext, url, data, apiVersion, mimeType) {
-  return xhr('POST', url, data, recognizerContext, apiVersion, mimeType)
 }