Как создать сервис ajax в ember-cli 3.17? - PullRequest
Новая
       72

Как создать сервис ajax в ember-cli 3.17?

0 голосов
/ 13 апреля 2020

Я недавно пытаюсь обновить свой ember с ember-cli: 2.6.2 до ember-cli: 3.17, и мне трудно пытаться сравнить мою реализацию сервиса ajax с более новой версией ember-cli. Я не тот, кто создал приложение с нуля, поэтому я не знаю, зачем нужен import { raw } from 'ic-ajax';. Любая помощь очень ценится.

Ошибка, которую я получаю: Uncaught (in promise) TypeError: Cannot read property 'status' of undefined

Это мой старый ajax сервис app/services/ajax.js

import Ember from 'ember';
import { raw } from 'ic-ajax';
import dasherizeObjectKeys from '../../utils/dasherize-object-keys';

const { inject, get, isEmpty } = Ember;

export default Ember.Service.extend({
  currentSession: inject.service(),

  request(url, method = 'GET', data = undefined, dataType = 'json') {
    data = JSON.stringify(dasherizeObjectKeys(data));
    return new Ember.RSVP.Promise((resolve, reject) => {
      const contentType = 'application/json';
      const token = this.get('currentSession.token');
      const headers= {
        'Authorization': `Token ${token}`,
        'X-Client-Platform': 'Web'
      };

      raw({ url, headers, data, type: method, dataType, contentType })
        .then((response) => this.handleSuccess(response, resolve))
        .catch((response) => this.handleError(response, reject));
    });
  },

  handleSuccess(response, resolve) {
    return resolve({
      status: response.jqXHR.status,
      response: response.response
    });
  },

  handleError(response, reject) {
    if (response.jqXHR.status === 401 && this.get('currentSession.isAuthenticated')) {
      this.get('currentSession').invalidate();
    }

    let error = get(response, 'jqXHR.responseJSON');
    if (isEmpty(error)) {
      const responseText = get(response, 'jqXHR.responseText');
      // FIXME: server should always return json, empty string is not json,
      // after backend is fixed, `JSON.parse` and try/catch for errors are not needed
      try {
        error = JSON.parse(responseText);
      } catch (e) {
        error = {
          errors: { detail: responseText }
        };
      }
    }

    error.status = response.jqXHR.status;
    reject(error);
  }
});

И это мой новый ajax сервис app/services/request.js

import Service from '@ember/service';
import { Promise } from 'rsvp';
import fetch from 'fetch';
import dasherizeObjectKeys from '../../utils/dasherize-object-keys';

export default class RequestService extends Service {
  request(url, method = 'GET', data = undefined, dataType = 'json') {
    data = JSON.stringify(dasherizeObjectKeys(data));
    return new Promise((resolve, reject) => {
      const contentType = 'application/json';
      const token = this.get('currentSession.token');
      const headers= {
        'Authorization': `Token ${token}`,
        'X-Client-Platform': 'Web'
      };

      fetch({ url, headers, data, type: method, dataType, contentType })
        .then((raw) => this.handleSuccess(raw, resolve))
        .catch((raw) => this.handleError(raw, reject));
    })
  }

  handleSuccess(response, resolve) {
    return resolve({
      status: response.jqXHR.status,
      response: response.response
    });
  }

  handleError(response, reject) {
    if (response.jqXHR.status === 401 && this.get('currentSession.isAuthenticated')) {
      this.get('currentSession').invalidate();
    }

    let error = get(response, 'jqXHR.responseJSON');
    if (isEmpty(error)) {
      const responseText = get(response, 'jqXHR.responseText');
      // FIXME: server should always return json, empty string is not json,
      // after backend is fixed, `JSON.parse` and try/catch for errors are not needed
      try {
        error = JSON.parse(responseText);
      } catch (e) {
        error = {
          errors: { detail: responseText }
        };
      }
    }

    error.status = response.jqXHR.status;
    reject(error);
  }
}

1 Ответ

1 голос
/ 14 апреля 2020

При обновлении с ic-ajax до fetch я использовал ember-fetch , который обеспечивает замену ajax с ic-ajax:

До 

var ajax = require('ic-ajax');

rsvpAjax: function (options) {
  return ajax.request(options.url, options);
}

После 

import ajax from 'ember-fetch/ajax';

rsvpAjax: function (options) {
  return ajax(options.url, options);
}

Это дало мне большую часть пути туда. Но есть некоторые небольшие семантические c изменения, с которыми вам придется иметь дело при переключении с ajax на выборку. Например, error.jqXHR.responseJSON больше не существует.

До: 

if(error && error.jqXHR){
  var errorResponse = error.jqXHR.responseJSON || {};
  // do something with the errorResponse
}

После: 

if(error && typeof(error.json) === 'function'){
  return error.json().then((errorResponse) => {
    // do something with the error
  }
}

Обратите внимание, что ошибка json устраняется с помощью обещания что, скорее всего, потребует некоторого рефакторинга, поскольку версия ajax этого не сделала.

Как вы видите в приведенном выше примере, jqXHR больше не существует. Я бы предположил, что проблема вашего статуса похожа. Если вы хотите увидеть пример "ajax -сервиса" с использованием fetch, см. Мой ember-rest-client addon. Это супер простая оболочка вокруг ember-fetch, которую я использую вместо использования ember-data.

...