Axios และ Fetch แตกต่างกันอย่างไร

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

การดึงข้อมูลและ Axios นั้นคล้ายกันมากในการทำงาน แต่สำหรับความเข้ากันได้ย้อนหลังมากกว่า Axios ดูเหมือนจะทำงานได้ดีขึ้น (เช่นการดึงข้อมูลไม่ทำงานใน IE 11 ให้ตรวจสอบโพสต์นี้ )

นอกจากนี้หากคุณทำงานกับคำขอ JSON ต่อไปนี้เป็นข้อแตกต่างบางประการที่ฉันสะดุดด้วย

ดึงคำขอโพสต์ JSON

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

คำขอโพสต์ Axios JSON

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

ดังนั้น:

• Fetch's body = ข้อมูล Axios
• การดึงข้อมูลของร่างกายจะต้องมีการstringifiedข้อมูล Axios' มีวัตถุ
• การดึงข้อมูลไม่มี URLในวัตถุคำขอ Axios มี URLในวัตถุคำขอ
• ฟังก์ชั่นการดึงข้อมูลคำขอจะประกอบด้วยURL เป็นพารามิเตอร์ฟังก์ชั่นการร้องขอ Axios ไม่รวมถึง URL เป็นพารามิเตอร์
• คำขอดึงข้อมูลเป็นokเมื่อวัตถุการตอบสนองที่มีคุณสมบัติ okขอ Axios เป็นokเมื่อสถานะคือ 200และ statusText เป็น 'ตกลง'
• ในการรับการตอบสนองวัตถุ json: ในการเรียกใช้ฟังก์ชัน json ()บนวัตถุตอบกลับใน Axios จะได้รับคุณสมบัติข้อมูลของวัตถุตอบกลับ

หวังว่านี่จะช่วยได้

พวกเขาเป็นห้องสมุดขอ HTTP ...

ผมจบลงด้วยข้อสงสัยเหมือนกัน แต่ในตารางนี้โพสต์isomorphic-fetchทำให้ฉันไปกับ ซึ่งเป็นfetchแต่ทำงานกับ NodeJS

http://andrewhfarmer.com/ajax-libraries/

ลิงค์ด้านบนนั้นตายตารางเดียวกันอยู่ที่นี่: https://www.javascriptstuff.com/ajax-l ไลบรารี/

หรือที่นี่:

ตามที่mzabriskie บน GitHub :

โดยรวมแล้วพวกเขาคล้ายกันมาก ประโยชน์บางอย่างของ axios:

• Transformers: อนุญาตให้ทำการแปลงข้อมูลก่อนที่จะทำการร้องขอหรือหลังจากได้รับการตอบกลับ

• Interceptors: อนุญาตให้คุณเปลี่ยนคำขอหรือการตอบกลับทั้งหมด (ส่วนหัวเช่นกัน) ดำเนินการ async ก่อนที่จะมีการร้องขอหรือก่อนที่จะตกลงการชำระเงิน

• การป้องกันXSRFในตัว

โปรดตรวจสอบ Axios การสนับสนุนเบราว์เซอร์

ฉันคิดว่าคุณควรใช้ axios

ความแตกต่างที่สำคัญอีกอย่างหนึ่งระหว่างการดึงข้อมูล API และ axios API

• ขณะใช้งานพนักงานบริการคุณต้องใช้การดึงข้อมูล API เท่านั้นกรณีที่คุณต้องการสกัดกั้นคำขอ HTTP
• อดีต ขณะทำการแคชใน PWA โดยใช้พนักงานบริการคุณจะไม่สามารถแคชหากคุณใช้ axios API (ใช้งานได้กับ fetch API เท่านั้น)

Axios เป็นแพ็คเกจของบุคคลที่สามแบบสแตนด์อะโลนที่สามารถติดตั้งได้ง่ายในโครงการ React โดยใช้ NPM

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

ดังนั้นขึ้นอยู่กับคุณคุณสามารถไปด้วยfetch()และอาจทำให้สับสนถ้าคุณไม่รู้ว่าคุณกำลังทำอะไรอยู่หรือแค่ใช้ Axios ซึ่งตรงไปตรงมามากกว่าในความคิดของฉัน

นอกจากนี้ ... ฉันกำลังเล่นกับ libs ต่างๆในการทดสอบของฉันและสังเกตเห็นการจัดการคำขอ 4xx ที่แตกต่างกัน ในกรณีนี้การทดสอบของฉันจะส่งคืนวัตถุ json ที่มีการตอบสนอง 400 ครั้ง นี่คือวิธีที่ 3 libs ยอดนิยมจัดการกับการตอบสนอง:

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

ที่น่าสนใจก็คือว่าrequest-promise-nativeและaxiosโยนกับการตอบสนอง 4xx ในขณะที่node-fetchไม่ได้ ยังfetchใช้คำมั่นสัญญาสำหรับการแจงส่วนคำสั่ง json

ประโยชน์ของ axios:

• Transformers: อนุญาตให้ทำการแปลงข้อมูลก่อนที่จะทำการร้องขอหรือหลังจากได้รับการตอบกลับ
• Interceptors: อนุญาตให้คุณเปลี่ยนคำขอหรือการตอบกลับทั้งหมด (ส่วนหัวเช่นกัน) ยังดำเนินการ async ก่อนที่จะมีการร้องขอหรือก่อนที่จะตกลงการชำระเงิน
• การป้องกัน XSRF ในตัว

ข้อดีaxiosกว่าfetch