即时设置 $http 超时

Question

我有一个 Angular 项目，它有一个非常好的超时烤面包机，如果请求太慢，它会弹出。但问题是我在文件上传期间需要更长的超时或超时重置（我使用 ng-file-upload 到 s3 存储）。

我的问题是：如何在每个进度响应期间重置 $http 超时或仅在文件上传期间将其更改为某个大数字：

这是我的配置函数中的拦截器代码：

$httpProvider.interceptors.push(function ($rootScope, $q, toaster) {
        return {
            request: function (config) {
                //config.cache = true;
                config.timeout = 6000;
                return config;
            },
            responseError: function (rejection) {
                //console.log(rejection);
                switch (rejection.status) {
                    case -1 :
                        console.log('connection timed out!');
                        toaster.pop({
                            type: 'error',
                            title: 'Server Timed Out!',
                            body: 'Waiting for request timed out! \n Please check your Internet connection and try again!',
                            timeout: 6000
                        });
                        break;
                    case 404 :
                        console.log('Error 404 - not found!');
                        toaster.pop({
                            type: 'error',
                            title: 'Server Timed Out!',
                            body: 'Error 404! \n Server returned: Not found! Please check your Internet connection and try again!',
                            timeout: 6000
                        });
                        break;
                }
                return $q.reject(rejection);
            }
        }
    })

这是我的上传功能：

$scope.upload = function (file) {

                                    $scope.count += 1;
                                    file.id= $scope.count;
                                    var durl = apiserv + "api.upload-s3.php?path=" + $scope.folder;
                                    var arr = [];
                                    arr.filename = file.name;
                                    arr.status = "";
                                    arr.progress = 0;
                                    arr.class = "list-group-item-warning";
                                    $scope.files[file.id] = arr;
                                    $http({url: durl}).then(function (drs) {
                                        console.log(drs);
                                        drs.data.file = file;
                                        Upload.upload({
                                            url: drs.data.action, //S3 upload url including bucket name
                                            method: 'POST',
                                            data: {
                                                key: drs.data.key,
                                                acl: drs.data.acl,
                                                Policy: drs.data.Policy,
                                                'X-Amz-Algorithm' : drs.data['X-Amz-Algorithm'],
                                                'X-Amz-Credential' : drs.data['X-Amz-Credential'],
                                                'X-Amz-Date' : drs.data['X-Amz-Date'],
                                                'X-Amz-Signature' : drs.data['X-Amz-Signature'],
                                                //'Content-Type': file.type !== '' ? file.type : 'application/octet-stream',
                                                file: file
                                            }
                                        }).then(function (resp) {
                                            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
                                            $scope.files[resp.config.data.file.id].status = "Success";
                                            $scope.files[resp.config.data.file.id].progress = 100;
                                            $scope.files[resp.config.data.file.id].class = "list-group-item-success";
                                        }, function (resp) {
                                            console.log('Error status: ' + resp.status);
                                            $scope.files[resp.config.data.file.id].status = "Error: "+ resp.status;
                                            $scope.files[resp.config.data.file.id].progress = 0;
                                            $scope.files[resp.config.data.file.id].class = "list-group-item-danger";
                                        }, function (evt) {
                                            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                                            //console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                                            console.log(evt.config.data.file);
                                            $scope.files[evt.config.data.file.id].status = "Uploading...";
                                            $scope.files[evt.config.data.file.id].progress = progressPercentage;
                                            $scope.files[resp.config.data.file.id].class = "list-group-item-warning";
                                        });
                                    });
                                };

Answer 1

$http 的 timeout option 接受承诺：

timeout – {number|Promise} – timeout in milliseconds, or promise that should abort the request when resolved.

这意味着它可以是一个轮询全局变量的承诺

config.timeout = $q(function (resolve) {
  var i = 0;
  var interval = setInterval(function () {
    i++;
    if (i * 1000 >= $rootScope.httpTimeout) {
      resolve();
      $rootScope.$apply();
      clearInterval(interval);
    });
  }, 1000);
});

或实现任何其他适合这种情况的逻辑。

即时设置 $http 超时

Set $http timeout on the fly

angularjs

amazon-s3

ng-file-upload