Axios เทียบกับ Fetch: อะไรดีที่สุดสำหรับการร้องขอ HTTP

```html

คำขอ HTTP มีความจำเป็นสำหรับการสื่อสารกับเซิร์ฟเวอร์และ APIs ในเว็บแอปพลิเคชัน มีหลายวิธีในการสร้างคำขอ HTTP ใน JavaScript แต่สองวิธีที่ได้รับความนิยมมากที่สุดคือ Axios และ fetch() ในโพสต์นี้ เราจะเปรียบเทียบและเปรียบเทียบ Axios และ Fetch() และดูว่าวิธีใดดีที่สุดสำหรับสถานการณ์ต่างๆ

button

Axios คืออะไร?

Axios เป็นไลบรารีของบุคคลที่สามที่ให้ไคลเอนต์ HTTP ที่ใช้ promise สำหรับสร้างคำขอ HTTP Axios ถูกใช้อย่างแพร่หลายในชุมชน JavaScript และเป็นที่รู้จักในด้านความเรียบง่ายและความยืดหยุ่น

ไวยากรณ์พื้นฐานของ Axios

ไวยากรณ์พื้นฐานของไลบรารี Axios มีดังนี้:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

คุณสมบัติหลัก:

สามารถยอมรับอ็อบเจกต์ที่มีทั้ง URL และการกำหนดค่าเป็นพารามิเตอร์ หรือแยก URL และอ็อบเจกต์การกำหนดค่า
ใช้คุณสมบัติ data เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ โดยจัดการการแปลง JSON โดยอัตโนมัติ
ส่งคืนข้อมูลเซิร์ฟเวอร์โดยตรงในคุณสมบัติ data ของอ็อบเจกต์การตอบสนอง
จัดการรหัสสถานะข้อผิดพลาด HTTP โดยอัตโนมัติ โดยส่งไปยังบล็อก catch
มีกลไกการจัดการข้อผิดพลาดที่คล่องตัวกว่า

ตัวอย่าง:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

ทำไมคุณควรใช้ Axios?

มีคุณสมบัติมากมายที่ทำให้ใช้งานง่ายและสะดวก เช่น:

การแปลงข้อมูล JSON อัตโนมัติ: Axios จะแปลงข้อมูลเป็นและจาก JSON โดยอัตโนมัติ ดังนั้นคุณจึงไม่ต้องแยกวิเคราะห์หรือ stringify ด้วยตนเอง
การหมดเวลาการตอบสนอง: Axios ช่วยให้คุณตั้งค่าการหมดเวลาสำหรับคำขอของคุณได้ ดังนั้นคุณจึงสามารถจัดการข้อผิดพลาดได้หากเซิร์ฟเวอร์ใช้เวลานานเกินไปในการตอบสนอง
ตัวสกัดกั้น HTTP: Axios ช่วยให้คุณสกัดกั้นคำขอและการตอบสนองก่อนที่จะจัดการโดย then หรือ catch ดังนั้นคุณจึงสามารถปรับเปลี่ยนหรือเพิ่มตรรกะเพิ่มเติมได้
ความคืบหน้าในการดาวน์โหลด: Axios สามารถติดตามความคืบหน้าของการดาวน์โหลดและการอัปโหลดของคุณได้ ดังนั้นคุณจึงสามารถแสดงความคิดเห็นแก่ผู้ใช้หรือยกเลิกคำขอได้หากจำเป็น
คำขอพร้อมกัน: Axios สามารถสร้างคำขอหลายรายการในเวลาเดียวกันและรวมเข้าด้วยกันในการตอบสนองเดียวโดยใช้ axios.all และ axios.spread

Fetch() คืออะไร?

fetch() เป็น API ในตัวที่มาพร้อมกับ JavaScript ดั้งเดิม เป็น API เว็บแบบอะซิงโครนัสที่ส่งคืนข้อมูลในรูปแบบของ promises fetch() ได้รับการสนับสนุนจากเบราว์เซอร์สมัยใหม่ทั้งหมด ดังนั้นคุณจึงไม่จำเป็นต้องนำเข้าไลบรารีภายนอกใดๆ เพื่อใช้งาน คุณสมบัติบางอย่างของ fetch() ได้แก่:

ไวยากรณ์พื้นฐาน: fetch() มีไวยากรณ์ที่เรียบง่ายและรัดกุมที่ใช้ URL ของทรัพยากรที่คุณต้องการดึงข้อมูลเป็นอาร์กิวเมนต์แรก และอ็อบเจกต์ตัวเลือกเสริมเป็นอาร์กิวเมนต์ที่สอง
ความเข้ากันได้แบบย้อนหลัง: fetch() สามารถใช้ได้ในเบราว์เซอร์รุ่นเก่าที่ไม่รองรับโดยใช้ polyfill เช่น whatwg-fetch หรือ fetch-ponyfill
ปรับแต่งได้: fetch() ช่วยให้คุณควบคุมคำขอและการตอบสนองได้มากขึ้น เนื่องจากคุณสามารถปรับแต่งส่วนหัว เนื้อหา วิธีการ โหมด ข้อมูลประจำตัว แคช การเปลี่ยนเส้นทาง และนโยบายผู้แนะนำได้

วิธีใช้ Axios เพื่อสร้างคำขอ HTTP

ในการใช้ Axios คุณต้องติดตั้งโดยใช้ npm หรือ yarn:

npm install axios

และนี่คือวิธีติดตั้ง Axios โดยใช้ yarn:

yarn add axios

หากคุณต้องการใช้ pnpm คุณสามารถติดตั้ง Axios โดยใช้คำสั่งต่อไปนี้:

pnpm install axios

อีกวิธีหนึ่ง คุณสามารถใช้เครือข่ายนำส่งเนื้อหา (CDN) เพื่อรวม Axios ในโปรเจกต์ของคุณได้ นี่คือวิธีรวม Axios โดยใช้ CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

จากนั้น คุณสามารถนำเข้าในไฟล์ JavaScript ของคุณและใช้เพื่อสร้างคำขอ HTTP ตัวอย่างเช่น ในการสร้างคำขอ GET ไปยัง URL คุณสามารถใช้ axios.get():

import axios from 'axios';

axios.get('https://example.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

การสร้างคำขอ HTTP ด้วย Fetch

ในการใช้ fetch() คุณไม่จำเป็นต้องติดตั้งอะไรเลย เนื่องจากมีอยู่ในเบราว์เซอร์อยู่แล้ว คุณสามารถใช้ฟังก์ชัน fetch() เพื่อสร้างคำขอ HTTP ตัวอย่างเช่น ในการสร้างคำขอ GET ไปยัง URL คุณสามารถใช้ fetch() ได้ดังนี้:

fetch('https://example.com/api')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

โปรดทราบว่า:

Axios จะแปลงข้อมูลเป็นและจาก JSON โดยอัตโนมัติ ในขณะที่ fetch() กำหนดให้คุณเรียกใช้ response.json() เพื่อแยกวิเคราะห์ข้อมูลเป็นอ็อบเจกต์ JavaScript
Axios ให้ข้อมูลในอ็อบเจกต์การตอบสนอง ในขณะที่ fetch() ให้ตัวอ็อบเจกต์การตอบสนองเอง ซึ่งมีข้อมูลอื่นๆ เช่น สถานะ ส่วนหัว และ url
Axios จัดการข้อผิดพลาดในบล็อก catch ในขณะที่ fetch() ปฏิเสธ promise เฉพาะในกรณีที่มีข้อผิดพลาดของเครือข่ายเท่านั้น ไม่ใช่ในกรณีที่การตอบสนองมีสถานะข้อผิดพลาด

ไวยากรณ์พื้นฐานของ Fetch

แน่นอน ฉันจะให้เนื้อหาเป็นภาษาอังกฤษ โดยจัดระเบียบเป็นสองส่วนแยกกันตามที่ร้องขอ

ไวยากรณ์พื้นฐานของ Fetch API มีดังนี้:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

คุณสมบัติหลัก:

URL เป็นอาร์กิวเมนต์แรก อ็อบเจกต์การกำหนดค่าเสริมเป็นอาร์กิวเมนต์ที่สอง
ใช้คุณสมบัติ body เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ โดยต้องมีการแปลงข้อมูลเป็นสตริงด้วยตนเอง
ส่งคืนอ็อบเจกต์ Response ที่มีข้อมูลการตอบสนองที่สมบูรณ์
เข้าสู่บล็อก catch เฉพาะในข้อผิดพลาดของเครือข่าย ไม่ใช่ในรหัสสถานะข้อผิดพลาด HTTP
ต้องมีการตรวจสอบรหัสสถานะการตอบสนองด้วยตนเองเพื่อจัดการข้อผิดพลาด HTTP

ตัวอย่าง:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios vs Fetch: การส่งคำขอ GET พร้อมพารามิเตอร์แบบสอบถาม:

// Axios
axios.get('/api/data', {
  params: {
    name: 'Alice',
    age: 25
  }
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: การส่งคำขอ POST พร้อมเนื้อหา JSON:

// Axios
axios.post('/api/data', {
  name: 'Bob',
  age: 30
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: การตั้งค่าการหมดเวลาสำหรับคำขอ:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5 seconds
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => {
  controller.abort(); // abort after 5 seconds
}, 5000);

fetch('/api/data', { signal })
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: การใช้ไวยากรณ์ async/await:

// Axios
async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

// Fetch
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios vs Fetch: ความเข้ากันได้แบบย้อนหลัง

ความเข้ากันได้แบบย้อนหลังหมายถึงความสามารถของระบบหรือแอปพลิเคชันใหม่กว่าในการทำงานร่วมกับรุ่นเก่า เพื่อให้มั่นใจถึงการเปลี่ยนแปลงที่ราบรื่นและการป้องกันการหยุดชะงักหรือการแตกหักเมื่อทำการอัปเกรด สิ่งนี้มีความสำคัญอย่างยิ่งในการพัฒนาซอฟต์แวร์ การพัฒนาเว็บ และระบบนิเวศเทคโนโลยี เพื่อรักษาเสถียรภาพ ความเข้ากันได้ และรุ่นและแพลตฟอร์มที่สอดคล้องกัน

Axios:

Axios เป็นไลบรารีของบุคคลที่สามที่ต้องติดตั้งและรวมอยู่ในโปรเจกต์ของคุณ
รองรับเบราว์เซอร์รุ่นเก่าโดยรวม polyfills สำหรับ promises และคุณสมบัติ JavaScript สมัยใหม่อื่นๆ
Axios ได้รับการดูแลรักษาอย่างแข็งขันและติดตามการอัปเดตเบราว์เซอร์และ Node.js ล่าสุด เพื่อให้มั่นใจถึงความเข้ากันได้กับสภาพแวดล้อมใหม่
อย่างไรก็ตาม เนื่องจากเป็นไลบรารีแยกต่างหาก คุณต้องตรวจสอบให้แน่ใจว่าคุณกำลังใช้เวอร์ชันที่เข้ากันได้กับ dependencies ของโปรเจกต์ของคุณ

Fetch:

Fetch API เป็น Web API ดั้งเดิมที่รองรับโดยเบราว์เซอร์สมัยใหม่
มีการสนับสนุนที่ดีเยี่ยมในเบราว์เซอร์เวอร์ชันล่าสุด แต่เบราว์เซอร์รุ่นเก่า (เช่น Internet Explorer) ไม่รองรับโดยธรรมชาติ
หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่า คุณจะต้องรวม polyfill หรือใช้โซลูชันสำรอง (เช่น XMLHttpRequest)
เนื่องจากเป็น API ดั้งเดิม จึงได้รับการอัปเดตและดูแลรักษาโดยผู้จำหน่ายเบราว์เซอร์โดยอัตโนมัติ เพื่อให้มั่นใจถึงความเข้ากันได้กับเบราว์เซอร์เวอร์ชันในอนาคต

Axios vs Fetch: การจัดการข้อผิดพลาด

การจัดการข้อผิดพลาดเป็นสิ่งสำคัญในการสร้างคำขอ HTTP เนื่องจากช่วยให้คุณจัดการสถานการณ์ต่างๆ เช่น ความล้มเหลวของเครือข่าย ข้อผิดพลาดของเซิร์ฟเวอร์ หรือการตอบสนองที่ไม่ถูกต้อง Fetch และ Axios มีวิธีการจัดการข้อผิดพลาดที่แตกต่างกัน ซึ่งฉันจะเปรียบเทียบกับตัวอย่างบางส่วน

Axios:

ใน Axios หากมีความล้มเหลวของคำขอ จะเกิดข้อผิดพลาดขึ้น และคุณสามารถจัดการข้อผิดพลาดได้อย่างง่ายดายด้วยบล็อก try-catch และรับข้อมูลข้อผิดพลาดจาก error.response.data ตัวอย่างเช่น:

// Axios error handling with try-catch
try {
  const response = await axios.get('/api/data');
  // handle response
} catch (error) {
  // handle error
  console.log(error.response.data);
}

Fetch:

ใน Fetch หากมีความล้มเหลวของคำขอ จะไม่เกิดข้อผิดพลาด แต่จะส่งคืนอ็อบเจกต์การตอบสนองพร้อมคุณสมบัติ ok ที่ตั้งค่าเป็น false คุณต้องตรวจสอบคุณสมบัติ ok และส่งข้อผิดพลาดด้วยตนเองหากคุณต้องการใช้บล็อก try-catch

อีกวิธีหนึ่ง คุณสามารถใช้คุณสมบัติ response.ok เพื่อจัดการกรณีต่างๆ ในเมธอด then ตัวอย่างเช่น:

// Fetch error handling with try-catch
try {
  const response = await fetch('/api/data');
  // check response status
  if (!response.ok) {
    // throw error if status is not ok
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  // handle response
} catch (error) {
  // handle error
  console.log(error.message);
}

// Fetch error handling with response.ok
fetch('/api/data')
  .then(response => {
    // check response status
    if (response.ok) {
      // handle response
    } else {
      // handle error
      console.log(`HTTP error! status: ${response.status}`);
    }
  })
  .catch(error => {
    // handle network error
    console.log(error.message);
  });

ความแตกต่างอีกประการหนึ่งระหว่าง Fetch และ Axios คือวิธีการจัดการรหัสสถานะที่ไม่ใช่ 200 Axios พิจารณารหัสสถานะใดๆ ที่อยู่นอกช่วง 2xx เป็นข้อผิดพลาดและปฏิเสธ promise Fetch พิจารณาการตอบสนอง HTTP ที่ถูกต้อง (แม้แต่ 4xx หรือ 5xx) เป็นความสำเร็จและแก้ไข promise

ซึ่งหมายความว่าคุณต้องจัดการรหัสสถานะที่ไม่ใช่ 200 ใน Fetch และ Axios แตกต่างกัน ตัวอย่างเช่น:

// Axios error handling for non-200 status codes
axios.get('/api/data')
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
    if (error.response) {
      // server responded with a status code outside 2xx
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // network error or request was aborted
      console.log(error.message);
    }
  });

// Fetch error handling for non-200 status codes
fetch('/api/data')
  .then(response => {
    // check response status
    if (response.ok) {
      // handle response
    } else {
      // server responded with a status code outside 2xx
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // handle error data
    console.log(data);
  })
  .catch(error => {
    // handle network error or request was aborted
    console.log(error.message);
  });

Axios vs Fetch: อะไรดีที่สุดสำหรับการสร้างคำขอ HTTP

ไม่มีคำตอบที่ชัดเจนว่าอันไหนดีกว่า เนื่องจากขึ้นอยู่กับความชอบและความต้องการของคุณ อย่างไรก็ตาม นี่คือแนวทางทั่วไปบางประการที่จะช่วยให้คุณตัดสินใจได้:

ใช้ Axios หากคุณต้องการวิธีที่ง่ายและสะดวกในการสร้างคำขอ HTTP พร้อมคุณสมบัติต่างๆ เช่น การแปลงข้อมูล JSON อัตโนมัติ การหมดเวลาการตอบสนอง ตัวสกัดกั้น HTTP ความคืบหน้าในการดาวน์โหลด และคำขอพร้อมกัน
ใช้ fetch() หากคุณต้องการวิธีดั้งเดิมและปรับแต่งได้ในการสร้างคำขอ HTTP พร้อมคุณสมบัติต่างๆ เช่น ความเข้ากันได้แบบย้อนหลัง ส่วนหัวแบบกำหนดเอง เนื้อหา วิธีการ โหมด ข้อมูลประจำตัว แคช การเปลี่ยนเส้นทาง และนโยบายผู้แนะนำ

สร้างโค้ด Axios/Fetch ด้วย Apidog

Apidog เป็น แพลตฟอร์มการพัฒนา API แบบร่วมมือกันแบบครบวงจร ที่มีชุดเครื่องมือที่ครอบคลุมสำหรับการออกแบบ การดีบัก การทดสอบ การเผยแพร่ และการจำลอง API Apidog ช่วยให้คุณสร้างโค้ด Axios สำหรับสร้างคำขอ HTTP ได้โดยอัตโนมัติ

button

นี่คือกระบวนการใช้ Apidog เพื่อสร้างโค้ด Axios:

ขั้นตอนที่ 1: เปิด Apidog และเลือกคำขอใหม่

ขั้นตอนที่ 2: ป้อน URL ของจุดสิ้นสุด API ที่คุณต้องการส่งคำขอไป ป้อน ส่วนหัวหรือพารามิเตอร์สตริงแบบสอบถามที่คุณต้องการรวมไว้ในคำขอ จากนั้นคลิก "Design" เพื่อเปลี่ยนไปใช้อินเทอร์เฟซการออกแบบของ Apidog

ขั้นตอนที่ 3: เลือก "สร้างโค้ดไคลเอนต์" เพื่อสร้างโค้ดของคุณ

ขั้นตอนที่ 4: คัดลอกและวางโค้ด Axios ที่สร้างขึ้นลงในโปรเจกต์ของคุณ

การใช้ Apidog เพื่อส่งคำขอ HTTP

Apidog มีคุณสมบัติขั้นสูงหลายอย่างที่ช่วยเพิ่มความสามารถในการทดสอบคำขอ HTTP คุณสมบัติเหล่านี้ช่วยให้คุณปรับแต่งคำขอและจัดการสถานการณ์ที่ซับซ้อนได้ง่ายดาย

button

ขั้นตอนที่ 1: เปิด Apidog และสร้าง คำขอ ใหม่

ขั้นตอนที่ 2: ค้นหาหรือป้อนรายละเอียด API ด้วยตนเองสำหรับคำขอ POST ที่คุณต้องการสร้าง

ขั้นตอนที่ 3: กรอกพารามิเตอร์ที่จำเป็นและข้อมูลใดๆ ที่คุณต้องการรวมไว้ในเนื้อหาคำขอ

บทสรุป

ทั้ง Axios และ fetch() เป็นวิธีการที่ทรงพลังและเชื่อถือได้สำหรับการสร้างคำขอ HTTP ใน JavaScript คุณสามารถเลือกวิธีที่เหมาะกับโปรเจกต์และสไตล์ของคุณได้ดีกว่า หรือแม้แต่ใช้ทั้งสองอย่างเพื่อวัตถุประสงค์ที่แตกต่างกัน สิ่งสำคัญคือต้องเข้าใจวิธีการทำงานและวิธีการใช้งานอย่างมีประสิทธิภาพ

การใช้ Apidog ไม่เพียงแต่ช่วยประหยัดเวลาและความพยายามอันมีค่าของคุณเท่านั้น แต่ยังช่วยให้มั่นใจได้ว่าโค้ดของคุณถูกต้องและปราศจากข้อผิดพลาด ด้วยอินเทอร์เฟซที่ใช้งานง่ายและคุณสมบัติที่ใช้งานง่าย Apidog เป็นเครื่องมือที่ต้องมีสำหรับนักพัฒนาที่ทำงานกับคำขอ Axios ขอให้สนุกกับการเขียนโค้ด!

button

```