Sự khác biệt giữa Axios và Fetch là gì?

Tôi đang gọi dịch vụ web bằng cách sử dụng tìm nạp nhưng tôi cũng có thể làm như vậy với sự trợ giúp của các axios. Vì vậy, bây giờ tôi bối rối. Tôi nên đi cho một trong hai axios hoặc tìm nạp?

Fetch và Axios có chức năng rất giống nhau, nhưng để tương thích ngược hơn, Axios dường như hoạt động tốt hơn (ví dụ như tìm nạp không hoạt động trong IE 11, hãy kiểm tra bài đăng này )

Ngoài ra, nếu bạn làm việc với các yêu cầu JSON, sau đây là một số khác biệt mà tôi tình cờ gặp phải.

Lấy yêu cầu bài viết 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
}

Yêu cầu bài viết của 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
}

Vì thế:

• Tìm nạp cơ thể = dữ liệu của Axios
• Cơ thể của Fetch phải được xâu chuỗi , dữ liệu của Axios chứa đối tượng
• Tìm nạp không có url trong đối tượng yêu cầu, Axios có url trong đối tượng yêu cầu
• Chức năng yêu cầu tìm nạp bao gồm url dưới dạng tham số , chức năng yêu cầu Axios không bao gồm url làm tham số .
• Yêu cầu tìm nạp là ok khi đối tượng phản hồi chứa thuộc tính ok , yêu cầu Axios vẫn ổn khi trạng thái là 200 và statusText là 'OK'
• Để có được phản hồi của đối tượng json: trong tìm nạp, hãy gọi hàm json () trên đối tượng phản hồi, trong Axios lấy thuộc tính dữ liệu của đối tượng phản hồi.

Hi vọng điêu nay co ich.

Chúng là các thư viện yêu cầu HTTP ...

Tôi kết thúc với cùng một nghi ngờ nhưng bảng trong bài này làm cho tôi đi với isomorphic-fetch. Đó là fetchnhưng hoạt động với NodeJS.

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

Liên kết ở trên đã chết Bảng tương tự ở đây: https : //www.javascript ware.com/ajax-lologists/

Hoặc ở đây:

Theo mzabriskie trên GitHub :

Nhìn chung chúng rất giống nhau. Một số lợi ích của axios:

• Transformers: cho phép thực hiện các biến đổi trên dữ liệu trước khi yêu cầu được thực hiện hoặc sau khi nhận được phản hồi

• Đánh chặn: cho phép bạn thay đổi hoàn toàn yêu cầu hoặc phản hồi (cả tiêu đề). đồng thời, thực hiện các hoạt động không đồng bộ trước khi yêu cầu được thực hiện hoặc trước khi Promise giải quyết

• Built-in XSRF bảo vệ

vui lòng kiểm tra Axios hỗ trợ trình duyệt

Tôi nghĩ bạn nên sử dụng axios.

Thêm một sự khác biệt lớn giữa API tìm nạp & API axios

• Trong khi sử dụng nhân viên dịch vụ, bạn chỉ phải sử dụng API tìm nạp nếu bạn muốn chặn yêu cầu HTTP
• Ví dụ. Trong khi thực hiện lưu trữ bộ đệm trong PWA bằng nhân viên dịch vụ, bạn sẽ không thể lưu vào bộ đệm nếu bạn đang sử dụng API axios (nó chỉ hoạt động với API tìm nạp)

Axios là gói bên thứ 3 độc lập có thể dễ dàng cài đặt vào dự án React bằng NPM.

Tùy chọn khác mà bạn đề cập là chức năng tìm nạp. Không giống như Axios, fetch()được tích hợp vào hầu hết các trình duyệt hiện đại. Với tìm nạp, bạn không cần phải cài đặt gói bên thứ ba.

Vì vậy, tùy thuộc vào bạn, bạn có thể đi cùng fetch()và có khả năng gây rối nếu bạn không biết những gì bạn đang làm HOẶC chỉ sử dụng Axios, điều này đơn giản hơn theo quan điểm của tôi.

Ngoài ra ... Tôi đã chơi xung quanh với nhiều lib khác nhau trong thử nghiệm của mình và nhận thấy cách xử lý khác nhau của các yêu cầu 4xx. Trong trường hợp này, thử nghiệm của tôi trả về một đối tượng json với phản hồi 400. Đây là cách 3 lib phổ biến xử lý phản hồi:

// 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)

Quan tâm là điều đó request-promise-nativevà axiosđưa ra phản hồi 4xx trong khi node-fetchkhông. Cũng fetchsử dụng một lời hứa cho phân tích json.

Lợi ích của axios:

• Transformers: cho phép thực hiện các biến đổi trên dữ liệu trước khi yêu cầu được thực hiện hoặc sau khi nhận được phản hồi
• Đánh chặn: cho phép bạn thay đổi hoàn toàn yêu cầu hoặc phản hồi (cả tiêu đề). cũng thực hiện các hoạt động không đồng bộ trước khi yêu cầu được thực hiện hoặc trước khi Promise giải quyết
• Bảo vệ XSRF tích hợp

Ưu điểm của axioshơnfetch