នៅពេលដែលយើងប្រើប្រាស់ក្បួនឈ្មោះ fetch( ) ជាមួយនឹងផ្លូវចូលទៅកាន់ក្បួនចុងផ្លូវណាមួយ browser នឹងផ្តល់វិធី HTTP (HTTP method) ឈ្មោះ GET អោយទៅសំណុំទិន្នន័យ request នៅក្នុងសំណុំទិន្នន័យ context ។ ជាការឆ្លើយតប ក្បួនចុងផ្លូវឈ្មោះ GET ដែលជាឈ្មោះត្រូវគ្នានឹងវិធីនេះ នឹងត្រូវយកមកប្រើជាស្វ័យប្រវត្តិ។ ក្រៅពីវិធី HTTP ឈ្មោះ GET នេះ នៅមានវិធី HTTP ជាច្រើនទៀត ដែលអាចត្រូវផ្តល់អោយសំណុំទិន្នន័យ request ដើម្បីជ្រើសរើសយកក្បួនចុងផ្លូវមានឈ្មោះត្រូវគ្នានឹងវិធី HTTP នេះមកប្រើ។ វិធី HTTP ដែលត្រូវបានយកមកប្រើប្រាស់ជាញឹកញាប់មានដូចជា GET, POST, PUT, DELETE, PATCH ជាដើម។ ក្រៅពីវិធីឈ្មោះ GET វិធី HTTP ដទៃទៀតនឹងមិនត្រូវបានផ្តល់អោយទៅសំណុំទិន្នន័យ request ជាស្វ័យប្រវត្តិឡើយ យើងចាំបាច់ត្រូវផ្តល់វិធីទាំងនេះអោយទៅសំណុំទិន្នន័យ request ដោយខ្លួនយើងផ្ទាល់។
<!--src/pages/index.astro-->
---
const response = await fetch("http://localhost:4321/api/1")
const data = await response.json()
---
<p>ឈ្មោះអ្នកប្រើប្រាស់គឺ៖ {data.username} </p>
<p>វិធី HTTP ដែលត្រូវផ្តល់អោយទៅអថេរ request គឺ៖ {data.method}</p>
// src/pages/api/[info].js
const usernames = ["សុធារឹទ្ធ", "ផល្លា", "ម៉េង", "ចំរើន"]
export async function GET({params, request}){
const id = params.info
return new Response(
JSON.stringify({
username: usernames[id],
method: request.method
}),
{
status: 200,
headers: {
"Content-Type": "application/json"
}
}
)
}
export function getStaticPaths() {
return [
{ params: { info: "0"} },
{ params: { info: "1"} },
{ params: { info: "2"} },
{ params: { info: "3"} }
]
}
ជារួម វិធី HTTP មានតួនាទីជាអ្នកកំណត់យកក្បួនចុងផ្លូវមានឈ្មោះដូចគ្នាមកប្រើផង នឹងបញ្ជក់ពីទង្វើដែលក្បួនចុងផ្លូវគួរតែត្រូវធ្វើផង។ ជាក់ស្តែង វិធី HTTP ឈ្មោះ POST នឹងជ្រើសរើសយកក្បួនចុងផ្លូវមានឈ្មោះថា POST ដូចគ្នាមកប្រើផង និងបញ្ជាក់ថាក្បួនចុងផ្លូវនេះ គួរតែទទួលយកទិន្នន័យដែលត្រូវផ្ញើរទៅ បញ្ជូលក្នុងមូលដ្ឋានទិន្នន័យ ឬក៏ធ្វើអ្វីផ្សេងទៀតជាមួយនឹងទិន្នន័យនេះ។ ដូចនេះ នៅពេលដែលយើងផ្តល់វិធី HTTP ឈ្មោះ POST អោយទៅក្បួនចុងផ្លូវ យើងចាំបាច់ត្រូវផ្តល់ទិន្នន័យមួយចំនួនអោយទៅក្បួនចុងផ្លូវផងដែរ។ ការផ្តល់វិធី HTTP ឈ្មោះ POST និងទិន្នន័យត្រូវធ្វើឡើងជាមួយនឹងក្បួនឈ្មោះ fetch( ) ។ ការផ្តល់វិធី HTTP ឈ្មោះ POST អាចត្រូវធ្វើឡើងតែជាមួយនឹងរបៀប SSR តែប៉ុណ្ណោះ។
<!--src/pages/index.astro-->
---
const response = await fetch('http://localhost:4321/api/info', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({newUser: 'ទិព្វសុដាច័ន្ទ'})
})
const data = await response.json()
---
<p>បញ្ជីឈ្មោះអ្នកប្រើប្រាស់ថ្មីគឺ៖ {data.toString()} </p>
// src/pages/api/info.js
const usernames = ["សុធារឹទ្ធ", "ផល្លា", "ម៉េង", "ចំរើន"]
export async function POST({params, request}){
const data = await request.json()
usernames.push(data.newUser)
return new Response(JSON.stringify(usernames))
}
នៅក្នុងសំណុំទិន្នន័យ context ដែលត្រូវផ្តល់អោយទៅក្បួនចុងផ្លូវជាស្វ័យប្រវត្តិ មានក្បួនពិសេសម៉្យាងមានឈ្មោះថា redirect ដែលយើងអាចស្រង់យកមកប្រើក្នុងគោលបំណងបង្វែរទិសដៅទៅកាន់ផ្លូវណាមួយផ្សេង។
<!--src/pages/index.astro-->
---
return await fetch('http://localhost:4321/api/info')
---
<p>បង្ហាញព័ត៌មាន</p>
// src/pages/api/info.js
const usernames = ["សុធារឹទ្ធ", "ផល្លា", "ម៉េង", "ចំរើន"]
export async function GET({params, request, redirect}){
return redirect("/posts/post-2", 307)
}
