React 入門

TypeScript コメント掲示板アプリの開発

新規投稿時に API でスリープさせる

開発環境では React の実行環境と API のサーバが同じ PC 上にあり，React から API へのリクエストは瞬時に処理されレスポンスが返されることから，投稿した内容が一旦画面に反映されて，その後すぐに画面が再描画されます．このため，React の非同期処理がどの様に行われているのかを観察することが難しくなります．

ここでは，React が非同期処理を行っていることをより明確に理解することを目的にします．このため，Django で開発した API において新規投稿のリクエストを受け取ったときに，データベースに反映する前に3秒間スリープすることであえて処理を遅らせるようにします．

API の開発においてこのページでは Django REST framework の generics.ListCreateAPIView を利用しています．Django REST framework のソースコードは https://github.com/encode/django-rest-framework にあり，この Create に関する処理は rest_framework/mixins.py の class CreateModelMixin に定義されています．この中に perform_create という関数があるので，これをオーバーライドして，処理を停止する命令を追加します．また，更新時や削除時にもスリープする処理を追加しておいてよいでしょう．

comments/views.pyfrom django.shortcuts import render
from rest_framework import generics
from rest_framework import status  ## 追加
from rest_framework.response import Response  ##  追加
from .models import Comment
from .serializers import CommentSerializer
from .paginations import LargeResultsSetPagination
import time  ## 追加

class CommentList(generics.ListCreateAPIView):
    queryset = Comment.objects.all()
    serializer_class = CommentSerializer
    pagination_class = LargeResultsSetPagination

    def perform_create(self, serializer):
        time.sleep(3)  # 3秒停止
        serializer.save()

class CommentDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Comment.objects.all()
    serializer_class = CommentSerializer

    def perform_update(self, serializer):
        time.sleep(3)  # 3秒停止
        serializer.save()

    def destroy(self, request, *args, **kwargs):
        time.sleep(3)  # 3秒停止
        instance = self.get_object()
        self.perform_destroy(instance)
        return Response(status=status.HTTP_204_NO_CONTENT)

ターミナル（またはコマンドプロンプト）から curl コマンドを使ってコメントを追加したときに結果が表示されるまで3秒以上待たされることがわかるはずです．

% curl -X POST -d "title=API" -d "body=test" http://127.0.0.1:8000/comments/ ⏎