Django Celery показывает возвращаемое значение задачи

У меня проблема с отображением возвращаемого значения моей задачи celery для клиента.

Redis является моим бэкендом результатов.

Это код:

tasks.py:

@shared_task
def create_task(task_type):
    sleep(int(task_type) * 5)
    data={
        'test':'test'
    }
    return data

Задача должна вернуть данные после сна в течение заданного времени.

views.py:

def home(request):
    return render(request, "async_project/home.html")


@csrf_exempt
def run_task(request):
    if request.POST:
        task_type = request.POST.get("type")
        task = create_task.delay(int(task_type))
        return JsonResponse({"task_id": task.id}, status=202)


@csrf_exempt
def get_status(request, task_id):
    task_result = AsyncResult(task_id)

    result = {
        "task_id": task_id,
        "task_status": task_result.status,
        "task_result": task_result.result,


    }
    return JsonResponse(result, status=200)

urls.py:

from django.urls import path

from . import views

urlpatterns = [
    path("tasks/<task_id>/", views.get_status, name="get_status"),
    path("tasks/", views.run_task, name="run_task"),
    path("home", views.home, name="home"),
]

settings.py:

# Celery settings
CELERY_BROKER_URL = 'redis://localhost:6379'
CELERY_RESULT_BACKEND = 'redis://localhost:6379'
CELERY_ACCEPT_CONTENT = ['application/json']
CELERY_TASK_SERIALIZER = 'json'
CELERY_RESULT_SERIALIZER = 'json'

home.html:

{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Django + Celery + Docker</title>
    <link rel="stylesheet" type="text/css" href="/staticfiles/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">
  </head>
  <body>
    <section class="section">
      <div class="container">
        <div class="column is-two-thirds">
          <h1 class="title">Django + Celery + Docker</h1>
          <hr><br>
          <div>
            <h2 class="title is-2">Tasks</h2>
            <h3>Choose a task length:</h3>
            <div class="field is-grouped">
              <p class="control">
                <button class="button is-primary" data-type="1">Short</button>
                <button class="button is-primary" data-type="2">Medium</button>
                <button class="button is-primary" data-type="3">Long</button>
              </p>
            </div>
          </div>
          <br><br>
          <div>
            <h2 class="title is-2">Task Status</h2>
            <br>
            <table class="table is-fullwidth">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Status</th>
                  <th>Result</th>
                </tr>
              </thead>
              <tbody id="tasks">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>


    <script type="text/javascript" src="{% static 'jquery-3.4.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'main.js' %}"></script>
  </body>
</html>

и main.js:


$(document).ready(() => {
  console.log('Sanity Check!');
});

$('.button').on('click', function() {
  $.ajax({
    url: '/tasks/',
    data: { type: $(this).data('type') },
    method: 'POST',
  })
  .done((res) => {
    getStatus(res.task_id);
  })
  .fail((err) => {
    console.log(err);
  });
});

function getStatus(taskID) {
  $.ajax({
    url: `/tasks/${taskID}/`,
    method: 'GET'
  })
  .done((res) => {
    const html = `
      <tr>
        <td>${res.task_id}</td>
        <td>${res.task_status}</td>
        <td>${res.task_result}</td>

      </tr>`
    $('#tasks').prepend(html);

    const taskStatus = res.task_status;

    if (taskStatus === 'SUCCESS' || taskStatus === 'FAILURE') return false;
    setTimeout(function() {
      getStatus(res.task_id);
    }, 1000);
  })
  .fail((err) => {
    console.log(err)
  });
}

Надеюсь, кто-нибудь сможет объяснить мне эту ошибку.

Вернуться на верх