JavaScript 中使用fetch的AbortController和取消功能：如何在Go 實現

1. 如果我們正在建立一個支付系統，並且請求一直進行，但使用者希望立即取消這筆訂單。這就是為什麼開發者會建立這個功能的原因。
2. 從電子商務購買商品。使用者意外關閉了頁面，無法立即返回上一頁。
3. 訂閱取消。

我使用Vue和Go建立了一個簡單的前端系統和後端系統的示範。

後端部分

mkdir cancellation-demo && cd cancellation-demo

go mod init callcellation-demo && \ 
touch main.go && \
go get github.com/gin-gonic/gin

package main

import (
 "net/http"
 "github.com/gin-gonic/gin"
)

func CancelHandler(ctx *gin.Context) {
  ctx.String(http.StatusOK, "hello world")
}

func main() { 
  router := gin.Default()
  router.GET("/", EchoHandler)
  router.Run()
}

func CancelHandler(ctx *gin.Context) {
  ctx.String(http.StatusOK, "hello world")
}

func CancelHandler(ctx *gin.Context) {
 responseResult := make(chan string)

 go func() {
  time.Sleep(3 * time.Second)
  responseResult <- "hello world"
 }()

 for {
 select {
 case result := <-responseResult:
   ctx.String(http.StatusOK, result)
 return
 case <-ctx.Request.Context().Done():
   log.Println("abort triggerred.Cancellation happen")
   ctx.AbortWithStatus(http.StatusNoContent)
 return
  }
 }
}

func CorsMiddleware() gin.HandlerFunc {
 return func(ctx *gin.Context) {
  ctx.Writer.Header().Set("Access-Control-Allow-Origin", "*")
  ctx.Writer.Header().Set("Access-Control-allow-Credentials", "true")
  ctx.Writer.Header().Set("Access-Control-allow-Method", "GET, POST, OPTIONS, PUT, PATCH, DELETE")
  ctx.Writer.Header().Set("Access-Control-allow-Headers", "Authorization, Accept,Accept-Encoding, Content-Type,Content-Length, Cache-Control, Origin, X-CSRF-Token, X-Requested-With")
 if ctx.Request.Method == http.MethodOptions {
   ctx.AbortWithStatus(http.StatusNoContent)
 　return
 }
   ctx.Next()
 }
}

package main

import (
 "log"
 "net/http"
 "time"

 "github.com/gin-gonic/gin"
)

func CorsMiddleware() gin.HandlerFunc {
 return func(ctx *gin.Context) {
  ctx.Writer.Header().Set("Access-Control-Allow-Origin", "*")
  ctx.Writer.Header().Set("Access-Control-allow-Credentials", "true")
  ctx.Writer.Header().Set("Access-Control-allow-Method", "GET, POST, OPTIONS, PUT, PATCH, DELETE")
  ctx.Writer.Header().Set("Access-Control-allow-Headers", "Authorization, Accept,Accept-Encoding, Content-Type,Content-Length, Cache-Control, Origin, X-CSRF-Token, X-Requested-With")
 if ctx.Request.Method == http.MethodOptions {
   ctx.AbortWithStatus(http.StatusNoContent)
 return
  }
  ctx.Next()
 }
}

func CancelHandler(ctx *gin.Context) {
 responseResult := make(chan string)

 go func() {
  time.Sleep(3 * time.Second)
  responseResult <- "hello world"
 }()

 for {
 select {
 case result := <-responseResult:
   ctx.String(http.StatusOK, result)
 return
 case <-ctx.Request.Context().Done():
   log.Println("abort triggered")
   ctx.AbortWithStatus(http.StatusNoContent)
 return
  }
 }

}

func main() {
 router := gin.Default()
 router.Use(CorsMiddleware())
 router.GET("/", CancelHandler)
 router.Run()
}

現在換前端的部分

pnpm create vite --template vue-ts web && \
cd web && \
pnpm install

import { ref } from 'vue';
const abortReference = ref(new AbortController());

const getRequest = async () => {
　　abortReference.value = new AbortController();
　　try {
 　　　const response = await fetch('http://localhost:8080', {
　　　　　　　method: 'GET',
 　　　　　　signal: abortReference.value.signal,
   　　})
 　　　const mainContent = await response.text();
　　　　console.log(mainContent);
　　} catch{
 　　　console.error('api error');
　　}
}

const quitRequest = () => {
 console.log('cancel request');
 abortReference.value.abort();
}

<script setup lang="ts">
 import { ref } from 'vue';
 const abortReference = ref(new AbortController());

 const getRequest = async () => {
     abortReference.value = new AbortController();
 　　try {
 　　const response = await fetch('http://localhost:8080', {
 　　　　method: 'GET',
　　　　 signal: abortReference.value.signal,
     })
 　　const mainContent = await response.text();
 　　console.log(mainContent);
  } catch{
 　　console.error('api error');
  }
}

 const quitRequest = () => {
 console.log('cancel request');
    abortReference.value.abort();
 }

</script>

<template>
 <button @click="getRequest">
    click to request
 </button>
 <button @click="quitRequest">
    Abort Request
 </button>
</template>

pnpm dev