The Dev's Desk•9mo ago

ดึง API มาใช้งานไม่ได้

ตัวอย่างโค้ดที่ใช้ครับ https://gist.github.com/qwrtsdev/f793bf75e21eeec86935f0824ba332e6 ลองดึงผ่าน Postman สามารถใช้งานได้ปกติ แถมขึ้น 200 ผ่าน Strapi ด้วย แต่พอเอามาใช้จริงกลับไม่มีอะไรขึ้นเลยครับ

Gist

ไม่สามารถดึงข้อมูลจาก API มาได้ ทั้งที่ดึงปกติดึงได้

ไม่สามารถดึงข้อมูลจาก API มาได้ ทั้งที่ดึงปกติดึงได้ - page.jsx

13 Replies

xenial-black•9mo ago

@qwrts

✅ สร้างโพสต์แล้ว! สร้างโพสต์ของคุณแล้วอย่าลืมพิมพ์อธิบายถึงปัญหาที่เจอ เพื่อให้สมาชิกท่านอ่านเข้าใจด้วยนะครับ สามารถอ่านแนวทางได้ที่ : https://discord.com/channels/1236751677801889792/1312136163372433509 หากได้รับคำตอบหรือได้รับการแก้ไขแล้ว อย่าลืมใช้คำสั่ง /fixed หรือกดปุ่ม 🔒 ปิดโพสต์ เพื่อปิดโพสต์ด้วยนะ!

quickest-silver•9mo ago

ที่มัน error เพราะไม่เจอ url ข้อมูลที่ให้มีน้อยเกินไปครับ ควรจะลงให้หมด ทั้งข้อความ error ยาวๆด้วยครับ ใช้ stack อะไรครับ nextjs หรอครับ

qwrtsOP•9mo ago

มันมีแค่นี้จริงๆเลยครับ

quickest-silver•9mo ago

ใส่ console.log ให้หมดทุกบรรทัดเลยครับ

quickest-silver•9mo ago

จะได้รู้ว่ามัน undefined ตรงไหน

qwrtsOP•9mo ago

ได้ครับเดี๋ยวจะลองดูครับ

quickest-silver•9mo ago

ส่วนตัวผมนะ แนะนำให้ย้าย fetch api ไปไว้ใน api/route แทน หน้า client side ไม่ควรที่จะ fetch data เองตรงๆ ถ้าเรียกจาก client side รู้หมดครับว่ายิงไปที่ endpoint ไหน ควรทำฝั่ง server side แทน มันจะแก้ปัญหา fetch api ไม่ค่อยติดได้ด้วยครับ ถ้าจะ fetch หน้า page มันต้องใช้ควบคู่กับ useState, useEffect เพราะอย่างปัญหาที่คุณเจอก็น่าจะเรื่องนี้นะ พอไม่ใช้ useState, useEffect ให้การรับค่าจาก api แล้วไปแสดงผล มันเลยทำให้บางทีก็ได้บ้างไม่ได้บ้าง แม้ว่าข้อมูลจาก api จะมาครบถูกต้อง แต่มันเอามาแสดงผลใน component ไม่ได้ครับ เพราะข้อมูลมันถูก fetch หลังจากที่ component ถูกสร้างขึ้นแล้ว จากที่ดูนะครับ 1.เจ้าของโพสใช้ nextjs 2.fetch api ผ่านหน้า client side ตรงๆ โดยไม่มีการใช้ useState, useEffect ควบคู่เพื่อให้ข้อมูลจาก api สามารถแสดงผลใน component ได้อย่างถูกต้อง ทำให้เกิด error เพราะข้อมูลที่ได้จาก api มาหลังจากที่ component ถูกสร้างเสร็จแล้ว ทำให้บางครั้งก็ได้บาง ไม่ได้บาง เพราะบางทีข้อมูล api ก็มาก่อนที่ component จะถูก render เสร็จ วิธีแก้ 1.ย้ายฟังก์ชั่น fetch api ไปไว้ฝั่ง server side แทน (api/route) 2.หากต้องการ fetch api หน้า client ควรใช้ useState, useEffect ควบคู่ในการดึงข้อมูล (ไม่ค่อยแนะนำ)

genetic-orange•9mo ago

เสริมอีกวิธีครับ คือใช้เงื่อนไขในการแสดงผล ก็จะกัน Error ข้อมูลที่เป็น undefined ได้ครับ

  {  blog ? 
      <div> 
        <h1>{blog.title}</h1>
        <p>{blog.description}</p>
     </div>
  }

  {  blog ? 
      <div> 
        <h1>{blog.title}</h1>
        <p>{blog.description}</p>
     </div>
  }

แต่ก็ไม่ค่อยแนะนำเพราะมันแก้ที่ปลายเหตุ จะใช้ได้ก็ต่อเมื่อเช็คใน log แล้วว่าข้อมูลมาครับ ขอสอบถามหน่อยครับ ว่าถ้าเราจะย้าย fetch api ไปฝั่ง Server เราจะดึงมาใช้ที่หน้า Client ยังไงต่อหรอครับ

quickest-silver•9mo ago

const res = await fetch('/api/...route...'); ครับ สามารถเขียน path เหมือนตอนดึงรูปด้วย next/image จาก folder public เลยครับ

quickest-silver•9mo ago

https://www.borntodev.com/2024/02/28/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99-api-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-next-js/

BorntoDev เริ่มต้นเรียน เขียนโปรแกรม ขั้นเทพ !

เขียน API ด้วย Next.js ฉบับเร็วจนไฟลุก – BorntoDev เริ่มต้นเรียน เข...

สร้าง API ด้วย Next.js แบบ Step by Step กัน หากใครรู้จัก Next.js มาแล้วก็น่าจะรู้ว่ามันคือ Full Stack Framework ที่เรียกได้ว่าฮิตมากๆ

genetic-orange•9mo ago

อ้ออ แล้วมันจะไม่มี Path โผล่มาที่ Client ใช่มั้ยคับ

quickest-silver•9mo ago

มันก็จะแสดงเป็น path ตามที่เราใส่ไปคือ get https://domain.com/api/route ครับ แต่จะไม่รู้ว่าใน route นั้นเรียก api อะไรต่ออีกที หรือฟังก์ชั่น api เส้นที่เรียก ทำงานอะไรบ้าง เพราะมันเป็นฝั่ง server side กรณีเรียก API ผ่าน Client-Side 1.ผู้ใช้กดปุ่ม "สมัครสมาชิก" บนหน้าเว็บไซต์ 2.เว็บไซต์เรียก API ภายนอก เช่น https://www.firebase.com/api/... โดยแนบ payload และ body ไปด้วย 3.เนื่องจากกระบวนการนี้เกิดขึ้นบนฝั่ง client-side ผู้ใช้สามารถดูการร้องขอ (request) ได้ผ่านเครื่องมือต่างๆ เช่น DevTools ของเบราว์เซอร์ 4.หากผู้ใช้มีความสามารถ อาจวิเคราะห์หรือแฮกข้อมูลที่ถูกส่งไปได้ กรณีเรียก API ผ่าน Server-Side 1.ผู้ใช้กดปุ่ม "สมัครสมาชิก" บนหน้าเว็บไซต์ 2.เว็บไซต์เรียก API ภายใน เช่น /api/register 3.ในฟังก์ชันที่อยู่ใน /api/register จะส่งคำร้องขอ (request) ไปยัง API ภายนอก (เช่น Firebase) โดยเป็นการประมวลผลจากฝั่ง server-side 4.ผู้ใช้จะไม่สามารถเห็นคำร้องขอหรือรายละเอียดที่ถูกส่งไปยัง API ภายนอกได้ เนื่องจากการประมวลผลทั้งหมดเกิดขึ้นบนเซิร์ฟเวอร์ สรุป - Client-Side: ผู้ใช้มีโอกาสเห็นและตรวจสอบคำร้องขอ API ได้ - Server-Side: การประมวลผลคำร้องขอเกิดขึ้นบน server ผู้ใช้จะไม่สามารถมองเห็นหรือดักจับข้อมูลได้ง่าย การเรียกผ่าน Server-Side จึงปลอดภัยกว่า โดยเฉพาะสำหรับข้อมูลที่สำคัญหรือการดำเนินการที่ต้องการความปลอดภัยสูง แต่ถ้าเป็นแค่ข้อมูลแสดงผลธรรมดาๆ อย่างเช่น ข้อมูลเนื้อหา blog ก็ไม่จำเป็นต้องทำผ่าน server side ก็ได้ครับ แต่ทางที่ดี best practice ควรทำผ่าน server side ทั้งหมดสำหรับ api ภายนอก แต่มันก็จะมีกรณียกเว้นบางอย่างที่ เราต้องการเว็บไซต์ที่เป็น pure client side แบบไม่เอา ssr เลย การใช้ client side ก็เหมือนกับการให้ผู้ใช้งานไปขอข้อมูลด้วยตัวเองเลย โดยที่เราเอาเอกสารสำคัญให้เขาไปส่งแทนเรานามของเรา ระหว่างทางเขาก็สามารถเปิดดูได้ว่าข้อมูลข้างในมีอะไร แต่ถ้าเราใช้ server side ผู้ใช้งาน จะต้องขอผ่านเราเท่านั้นครับ เขาจะมีหน้าที่แค่บอกเราว่า เขาต้องการอะไร แต่ไม่สามารถไปเอาได้ด้วยตัวเองเพราะไม่มีสิทธิ์ แล้วเราก็จะมีหน้าที่ไปส่งด้วยตัวเอง แล้วเอาสิ่งที่ผู้ใช้งานขอส่งกลับไป

qwrtsOP•9mo ago

ขอบคุณมากเลยครับ ผมเองก็ลืมคิดถึงเรื่องนี้ไปเลย ผมเองก็เรียก api มันทุกหน้าเลย ทั้งที่มันเป็นของใช้ซ้ำได้

Gaming

Programming

ดึง API มาใช้งานไม่ได้

Did you find this page helpful?