Asked Dec 19th, 2020 10:59 AM 106 0 2
  • 106 0 2
0

Cho em hỏi làm thế nào để chuyển được biến từ API thành biến trong JS được ạ ??

Share
  • 106 0 2

Xin các tiên sinh chỉ giáo ạ !! Em mới tập viết API chưa hiểu chổ này cho lắm ạ 😅 Em có biến row như hình, em gọi được API về rồi và em muốn lấy length của nó để gán lại vào row. Nhưng khi em log thử thì nó bảo biến row undefine ạ ? Vậy e làm sao mới có thể sử dụng biến row được gọi về từ API ạ ?

2 ANSWERS


Answered Dec 24th, 2020 8:58 AM
Accepted
0

Có 2 lệnh console.log(row); mình sẽ gọi nó là log1log2. lệnh log1 thì đã ghi ra giá trị bạn muốn, nên mình chỉ sẽ nhắc đến lệnh log2 ở dưới. Vì method fetch trả về 1 Promise, nên phải sử dụng then để đọc tiếp dữ liệu trả về của Promise đó khi nó xử lý xong. (có cách khác là sử dụng async/await). Theo như code của bạn, Khi Promise xử lý xong nó sẽ gọi đến function _getData, Khi function _getData được gọi nó gán được giá trị vào biến row đúng mục đích của bạn rồi đấy, nhưng tiếc rằng lệnh log2 lại được gọi trước khi Promise được xử lý xong (lúc đó hàm _getData chưa được gọi và chưa làm thay đổi biến row) nên tất nhiên nó sẽ ghi ra giá trị là undefine.

Giải quyết vấn đề này có nhiều cách.

1. Xử lý tiếp logic ngay trong function _getData (không khuyến khích)

function _getData(data){
    row = parseInt(data.length / colPerRow);
    //code
}

2. Tiếp tục dùng then để xử lý tiếp.

fetch(uri)
    .then(response => response.json())
    .then(data => _getData(data))
    .then(() => doSomeThing())
    .catch(error => console.error('Unable ...', error));

Nhưng, sử dụng then nhiều thì code sẽ rất rối.

3. Xử dụng async/await (khuyến khích)

let data = await fetch(uri).then(response => response.json());
row = data.length/colPerRow;
//code
Share
Answered Dec 19th, 2020 12:09 PM
+2

Trong JS có một thuật ngữ gọi là bất đồng bộ dữ liệu. Việc này cũng xảy ra khi em gọi API, hàm fetch() của em sẽ gọi API và trả về một Promise, sau đó em phải dùng .then() để có thể đọc được Promise này lấy dữ liệu, nhưng những dữ liệu được lấy về chỉ tồn tại ở bên trong .then() mà thôi, khi em gán row ở bên trong .then() như thế kia thì biến row đó chỉ có giá trị sử dụng bên trong hàm .then(), ở bên ngoài nó chưa được gán giá trị nên sẽ bị undefined.

Em có thể đọc qua các bài viết về Promise trong JS, async await trong JS, closure trong JS để hiểu thêm về vấn đề này nhé

Share
Dec 19th, 2020 12:38 PM

Vậy những gì em DOM ở các file js khác thì nó sẽ không hoạt động đúng không anh ? Nó chỉ hoạt động khi e bỏ vào then thôi

+1
| Reply
Share
Dec 19th, 2020 1:40 PM

@sucanabo bạn phải tìm hiểu về bất đồng bộ trong JS đã mới hiểu sâu được cách xử lý tiếp theo bạn ạ

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.