Hướng dẫn how get fetch data from javascript? - làm cách nào để lấy dữ liệu tìm nạp từ javascript?

Question

Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu về API tìm nạp JavaScript và cách sử dụng nó để thực hiện các yêu cầu HTTP không đồng bộ.: in this tutorial, you’ll learn about the JavaScript Fetch API and how to use it to make asynchronous HTTP requests.

Nội dung chính Show

Gửi một yêu cầu
Đọc phản hồi
Xử lý các mã trạng thái của phản hồi
Ví dụ API tìm nạp JavaScript
Bản tóm tắt
Fetch () trong javascript là gì?
JavaScript có thể tìm nạp dữ liệu từ cơ sở dữ liệu không?
Những cách chúng ta có thể sử dụng JavaScript để yêu cầu dữ liệu từ API là gì?

API Fetch là giao diện hiện đại cho phép bạn thực hiện các yêu cầu HTTP cho các máy chủ từ trình duyệt web.

Nếu bạn đã làm việc với đối tượng

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

2 (

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

3), API tìm nạp có thể thực hiện tất cả các tác vụ như đối tượng

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

3.

Ngoài ra, API tìm nạp đơn giản và sạch hơn nhiều. Nó sử dụng

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

5 để cung cấp các tính năng linh hoạt hơn để thực hiện các yêu cầu cho các máy chủ từ trình duyệt web.

Phương pháp

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 có sẵn trong phạm vi toàn cầu hướng dẫn các trình duyệt web gửi yêu cầu đến URL.

Gửi một yêu cầu

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 chỉ yêu cầu một tham số là URL của tài nguyên mà bạn muốn tìm nạp:

let response = fetch(url);
Code language: JavaScript (javascript)

Phương thức

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 trả về

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

5 để bạn có thể sử dụng các phương thức

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

0 và

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

1 để xử lý nó:

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

Khi yêu cầu hoàn thành, tài nguyên có sẵn. Tại thời điểm này, lời hứa sẽ giải quyết thành một đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2.

Đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2 là trình bao bọc API cho tài nguyên được tìm nạp. Đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));



Code language: JavaScript (javascript)

2 có một số thuộc tính và phương pháp hữu ích để kiểm tra phản hồi.

Đọc phản hồi

Nếu nội dung của phản hồi ở định dạng văn bản thô, bạn có thể sử dụng phương thức

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

5. Phương thức

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

5 trả về một

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

5 giải quyết với các nội dung hoàn chỉnh của tài nguyên được tìm nạp:

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

Trong thực tế, bạn thường sử dụng ________ 28/________ 29 với phương pháp

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 như thế này:

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

Bên cạnh phương pháp

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

5, đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2 còn có các phương pháp khác như

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

3,

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

4,

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

5 và

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

6 để xử lý loại dữ liệu tương ứng.

Xử lý các mã trạng thái của phản hồi

Đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2 cung cấp mã trạng thái và văn bản trạng thái thông qua các thuộc tính

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

8 và

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

9. Khi một yêu cầu thành công, mã trạng thái là

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

0 và văn bản trạng thái là

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

1:

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();



Code language: JavaScript (javascript)

Output:

200
OK
Code language: JavaScript (javascript)

Nếu tài nguyên được yêu cầu không tồn tại, mã phản hồi là

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

2:

let response = await fetch('/non-existence.txt');

console.log(response.status); // 400
console.log(response.statusText); // Not Found
Code language: JavaScript (javascript)

Output:

400
Not Found
Code language: JavaScript (javascript)

Nếu URL được yêu cầu ném lỗi máy chủ, mã phản hồi sẽ là

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

3.

Nếu URL được yêu cầu được chuyển hướng đến phần mới với phản hồi

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

4,

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

8 của đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2 được đặt thành

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

0. Ngoài ra thuộc tính

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

8 được đặt thành

async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();
Code language: JavaScript (javascript)

9.

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 trả về một lời hứa từ chối khi xảy ra lỗi thực sự như thời gian chờ trình duyệt web, mất kết nối mạng và vi phạm CORS.

Ví dụ API tìm nạp JavaScript

Giả sử rằng bạn có một tệp JSON định vị trên máy chủ web với các nội dung sau:

[{ "username": "john", "firstName": "John", "lastName": "Doe", "gender": "Male", "profileURL": "img/male.png", "email": "" }, { "username": "jane", "firstName": "Jane", "lastName": "Doe", "gender": "Female", "profileURL": "img/female.png", "email": "" } ]

Code language: JSON / JSON with Comments (json)

Những điều sau đây cho thấy trang HTML:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Demotitle>
    <link rel="stylesheet" href="css/style.css">
head>
<body>
    <div class="container">div>
    <script src="js/app.js">script>
body>
html>
Code language: HTML, XML (xml)

Trong

200
OK



Code language: JavaScript (javascript)

1, chúng tôi sẽ sử dụng phương thức

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 để lấy dữ liệu người dùng và hiển thị dữ liệu bên trong phần tử

200
OK
Code language: JavaScript (javascript)

3 với lớp

200
OK
Code language: JavaScript (javascript)

4.

Đầu tiên, khai báo chức năng

200
OK
Code language: JavaScript (javascript)

5 lấy

200
OK
Code language: JavaScript (javascript)

6 từ máy chủ.

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

0

Sau đó, phát triển chức năng

200
OK
Code language: JavaScript (javascript)

7 hiển thị dữ liệu người dùng:

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

1

Kiểm tra bản demo API tìm nạp.

Bản tóm tắt

API tìm nạp cho phép bạn yêu cầu không đồng bộ cho tài nguyên.

Sử dụng phương thức

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

6 để trả về một lời hứa giải quyết thành đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2. Để có được dữ liệu thực tế, bạn gọi một trong các phương thức của đối tượng phản hồi, ví dụ:

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

5 hoặc

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

3. Các phương pháp này giải quyết vào dữ liệu thực tế.

Sử dụng các thuộc tính

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

8 và

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

9 của đối tượng

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

2 để có được văn bản trạng thái và trạng thái của phản hồi.

Sử dụng phương thức

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

1 hoặc câu lệnh

let response = await fetch('/non-existence.txt');

console.log(response.status); // 400
console.log(response.statusText); // Not Found
Code language: JavaScript (javascript)

6 để xử lý yêu cầu thất bại.

Hướng dẫn này có hữu ích không?

Fetch () trong javascript là gì?

Phương thức Fetch () trong JavaScript được sử dụng để yêu cầu dữ liệu từ máy chủ.Yêu cầu có thể thuộc bất kỳ loại API nào trả về dữ liệu trong JSON hoặc XML.Phương thức Fetch () yêu cầu một tham số, URL để yêu cầu và trả lại lời hứa.used to request data from a server. The request can be of any type of API that return the data in JSON or XML. The fetch() method requires one parameter, the URL to request, and returns a promise.

JavaScript có thể tìm nạp dữ liệu từ cơ sở dữ liệu không?

Bởi vì PHP là ngôn ngữ phía máy chủ, nó hỗ trợ thực thi kết nối của chúng tôi, vì vậy khi yêu cầu máy chủ của chúng tôi thành công thì chúng tôi có thể lấy bất kỳ dữ liệu nào từ cơ sở dữ liệu.Trong JavaScript, chúng tôi đạt được điều này bằng Ajax.Ajax có đối tượng XMLHTTPREQUEST để giao tiếp với các máy chủ.In javascript we achieve this by ajax. Ajax has XMLHttpRequest object to communicate with servers.

Những cách chúng ta có thể sử dụng JavaScript để yêu cầu dữ liệu từ API là gì?

Tất cả các cách có thể thực hiện cuộc gọi API trong JavaScript ...

XMLHttpRequest..

fetch..

Axios..

jQuery..

programming javascript fetch() Fetch API Fetch() method Fetch NodeJS Fetch JavaScript w3schools Fetch API example

Hướng dẫn how get fetch data from javascript? - làm cách nào để lấy dữ liệu tìm nạp từ javascript?

Gửi một yêu cầu

Đọc phản hồi

Xử lý các mã trạng thái của phản hồi

Ví dụ API tìm nạp JavaScript

Bản tóm tắt

Fetch () trong javascript là gì?

JavaScript có thể tìm nạp dữ liệu từ cơ sở dữ liệu không?

Những cách chúng ta có thể sử dụng JavaScript để yêu cầu dữ liệu từ API là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội