在 ember ajax 服务中获取 xhr 返回函数答案

【问题标题】：get xhr return function in ember ajax service在 ember ajax 服务中获取 xhr 返回函数
【发布时间】：2017-04-20 06:45:26
【问题描述】：

我有一个提供 ajax 帖子的 ember 服务

import Ember from 'ember';
import ENV from '../config/environment';

export default Ember.Service.extend({
  save(data) {
    return new Ember.RSVP.Promise(
      function (resolve, reject) {
        function progress(e){

          if(e.lengthComputable){
            let max = e.total;
            let current = e.loaded;
            let Percentage = (current * 100)/max;
            console.log(Percentage);
            if(Percentage >= 100)
            {
              // process completed
            }
          }
        }

        Ember.$.ajax({
          type: 'POST',
          enctype: 'multipart/form-data',
          url: ENV.APP.API_HOST + '/profile/lampiran-desas',
          processData: false,
          contentType: false,
          cache: false,
          data: data,
          xhr: function() {
            let myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
              myXhr.upload.addEventListener('progress',progress, false);
            }
            return myXhr;
          },
          success: function (response) {
            resolve(response);
          },
          error: function (error) {
            reject(error);
          }
        });
      });
  }
});

成功响应在我的组件中正常返回。但是如何让我的函数进度返回。所以我可以在我的模板上制作一个加载进度条..？

谢谢..

【问题讨论】：

需要手动设置加载状态。加载将仅针对路线的模型挂钩处理。有关更多信息，请参阅此 twiddle ember-twiddle.com/#/… 我将使用 isLoading 来明确设置加载！

标签： javascript ajax ember.js ember-components ember-controllers

【解决方案1】：

据我所知，您正在服务中进行远程调用，并且希望在组件中显示进度。为此，您需要将相关数据保存在服务本身内；并在组件中显示进度。

这里是我为你准备的twiddle来说明情况。 mock-remote-call-service 是一个模拟服务，每 200 毫秒更新 10% 的进程。结果直接保存到服务本身。 progress-displayer-component负责显示进度，启动远程调用任务，甚至显示返回的数据。

这只是一个模拟示例来解释我的观点。我希望这会有所帮助。

【讨论】：