两个 Ajax 调用未并行运行

Question

我有两个使用 jQuery 的 ajax 调用。第一个需要更长的时间，所以我提出了另一个 ajax 请求（第二个），它返回返回的进度，但第二个 ajax 请求将等待处理，直到第一个响应到来。对所有第二个 ajax 请求的响应是在对第一个 ajax 请求的响应到来之后。也尝试过做 async true。

Ajax 调用

function barStatus(){
            $.ajax({
                    url: '/bar-status',
                    method: 'get',

                    success: function(data) {
                        console.log('files in-progress:' + data);
                        if( prog_true == -1){
                            prog_true = data;
                        }
                    var calc = ((1-(data / prog_true)) * 100)+1;
                    console.log(calc+'% completed');
                    document.getElementById('myBar').style.width = calc + '%';
                        if(data != 0 ){
                            setTimeout(function(){
                                barStatus();
                            },5000); 
                        }
                    }
                });

    }

    function ajax_query() {

        barStatus();

        // ajax call here
        var prevResult = 0;
         $.ajax({

            url: '/proceed',
            method: 'get',
            async: true,

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#process').html(response);
                clearInterval(progressUpdater);

                var inc_view = 1;
                document.getElementById('process').style.display = "none";
                document.getElementById('procees').style.display = "block";
            }
        }); 
    }

ajax 请求所调用的控制器中的代码：

public function barStatus()
{
    $files_directory = 'uploads/dropzonePDF';
    $files = Storage::files($files_directory);
    $files_count = count($files);
    return $files_count;
}

public function index(Request $request)
{
    session_write_close(); 
    $path = storage_path('uploads\dropzonePDF\\');
    $pdfs = File::allfiles($path);
    if (!$pdfs) {
        return Redirect('/')->with('message', 'Upload files to Proceed!');
    }
    $response = [];
    foreach ($pdfs as $index => $file) {
        $filename = $file->getFilename();
        $filenameSlug = $file->getBasename('.' . $file->getExtension()) . '-' . now()->format('his') . '.' . $file->getExtension();
        $response[$index] = $this->extractDataFromPDF($file);
        $response[$index]['document_name'] = $filename;
        $isExists = false;
        if ($response[$index]['success']) {
            $data = $response[$index]['data'];
            $applicant = trim(explode('-', $file->getBasename())[0]);
            if (empty($data['name'])) {
                $response[$index]['data']['name'] = $applicant;
            }

            $document = Documents::create([
                'user_id' => null,
                'document_name' => $filenameSlug,
                'document_updated_name' => 'Notice of Deposition - ' . $data['name'] . '.pdf',
            ]);
            ActivityLogs::create([
                'user_id' => null,
                'loggable_id' => $document->id,
                'activity' => 'Add',
                'activity_model' => get_class($document),
            ]);

            $pdf_record = PdfRecord::create([
                'document_id' => $document->id,
                'name' => $data['name'],
                'address' => isset($data['address']) ? $data['address'] : null,
                'date' => isset($data['date']) ? $data['date'] : null,
                'time' => isset($data['time']) ? $data['time'] : null,
                'phone' => isset($data['phone']) ? $data['phone'] : null,
                'caseId' => isset($data['caseId']) ? $data['caseId'] : null,
                'type' => isset($data['type']) ? $data['type'] : null,
                'judge' => isset($data['judge']) ? $data['judge'] : null,
            ]);
            ActivityLogs::create([
                'user_id' => null,
                'loggable_id' => $pdf_record->id,
                'activity' => 'Add',
                'activity_model' => get_class($pdf_record),
            ]);
            Storage::move('uploads/dropzonePDF/' . $filename, 'uploads/processed/' . $filenameSlug);
        } else {
            Storage::move('uploads/dropzonePDF/' . $filename, 'uploads/unprocessed/' . $filenameSlug);
        }

        Storage::delete('uploads/dropzonePDF/' . $filename);
    }

    $files_directory = 'uploads/dropzonePDF';
    $files = Storage::files($files_directory);
    $files_count = count($files);

    session()->put('pdfData', $response);
    session()->put('inc_view', 1);
    session_write_close(); 

    return view('result-page')->with([
        'proceed' => true,
        'data' => $response,
    ]);
}

Answer 1

您不需要创建第二个进度 api 方法。您应该在前端收听xhr requests 诸如进度等事件。事情比你想象的要容易得多:)