programming javascript

Chức năng tạo javascript

Ai đã từng sử dụng Javascript chắc đều biết cách xử lý bất đồng bộ là một đặc trưng của Javascript. Ví dụ: bạn viết hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

0 để gửi yêu cầu đến một đường dẫn rồi ghi nhật ký kết quả trả về ra bảng điều khiển

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

Trong đoạn mã trên, hàm gắn liền với sự kiện

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

1 là đoạn mã được xử lý bất đồng bộ. Dù nó được viết trước các lệnh như

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

2 và

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

3 nhưng thực tế lại được xử lý sau khi yêu cầu đã hoàn thành và có kết quả trả về

Hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

0 như trên được viết không tốt. Lý do là chức năng đang thực hiện hai chức năng khác nhau. gửi yêu cầu lấy kết quả và xử lý kết quả trả về. Trong khi chức năng gửi yêu cầu lấy kết quả có thể sử dụng chung cho bất kỳ đường dẫn nào thì chức năng xử lý kết quả nên được tách riêng ra để tùy biến cho các trường hợp khác nhau. Do đó, chúng ta có thể sửa lại hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

0 thành

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

6 với tham số đầu vào

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

7 là một hàm xử lý bất kỳ

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Hàm processResult được truyền như một tham số và được thực hiện trong một hàm khác dưới một điều kiện nhất định, theo định nghĩa có tên gọi là

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

8. Sau khi tách ra, chúng ta có thể chuyển toàn bộ phần mã liên quan đến việc gửi yêu cầu vào thư viện, để sau khi sử dụng, chúng ta chỉ cần định nghĩa hàm xử lý kết quả là đủ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Việc sử dụng

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

8 để xử lý bất đồng bộ đã tồn tại trong suốt lịch sử của Javascript. Khuyết điểm của nó là bạn đã định nghĩa một hàm số nhưng lời gọi thực hiện nó được lồng ngược trong và phụ thuộc vào một hàm khác. Điều đó dẫn đến những sự cố phản ánh thời gian, ví dụ như khi bạn muốn lấy kết quả từ đường dẫn A gửi cho đường dẫn B, rồi lấy kết quả từ đường dẫn B gửi đến đường dẫn C,…

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

Những dòng lệnh lồng nhau rối mắt như trên được gọi là

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

30. Nó sẽ còn trở nên phức tạp hơn nữa trong trường hợp bạn cần bổ sung vào các lệnh xử lý lỗi hoặc đối ứng với các trường hợp ngoại lệ. Vậy cách giải quyết

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

30 như thế nào? .

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

ES6. phiên bản thứ 6 của ngôn ngữ ECMAScript đặc tả do tổ chức Ecma International tạo ra. Công cụ Javascript – được sử dụng để dịch mã Javascript, có thể là một trình thông dịch hoặc một trình biên dịch động – của các trình duyệt thông thường được tạo theo bộ mô tả này

2. Lời hứa

Promise là một đối tượng được sử dụng trong các xử lý bất đồng bộ, đại diện cho một thao tác chưa hoàn thành, đang chờ đợi kết quả trong tương lai. Promise a object can have an in ba status

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

34. trạng thái ban đầu, kết quả chưa xác định của thao tác là thành công hay thất bại

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

35. thao tác có kết quả thành công

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

36. thao tác có kết quả thất bại

Chúng ta không sử dụng hàm gọi lại trực tiếp trong tham số của hàm

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

37 nữa, sửa lời gọi hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

6 về như ban đầu.

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

0. Tuy nhiên, khác với lệnh cấm đầu, bên trong hàm ta không xử lý trực tiếp kết quả mà trả về một lời hứa

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

0 lúc này chỉ làm một công việc được định nghĩa là hàm gọi lại để khởi tạo đối tượng Hứa trả lại. Chức năng gọi lại này phải có ít nhất hai tham số. ________ 241 và ________ 242. Cả hai đều là chức năng gọi lại được định nghĩa là đi kèm với đối tượng Promise.

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

43 là hàm gọi lại để chuyển trạng thái của Lời hứa từ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

44 sang

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

45 [đánh dấu thao tác thành công],

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

42 là hàm gọi lại để chuyển trạng thái của

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

33 từ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

44 sang

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

49 [đánh dấu thao tác thất bại]

Ở đoạn mã kể trên, Promise object at the start return will have the status

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

44. Thao tác gửi yêu cầu đã được thực hiện bên trong đối tượng Lời hứa. Khi có kết quả trả về thành công, hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

41 được gọi để chuyển trạng thái của đối tượng Lời hứa về

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Chúng ta có thể truyền các hàm xử lý kết quả vào đối tượng Promise tạo ra ở trên thông qua phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

83 của đối tượng chính Promise đó. Hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

83 có thể nhận hai tham số, tham số đầu tiên là hàm gọi lại để xử lý kết quả khi Promise có trạng thái

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

45, tham số thứ hai là hàm gọi lại để xử lý kết quả khi Promise có trạng thái

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Ví dụ chúng ta truyền hàm log kết quả ra bảng điều khiển để làm tham số cho hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

83 của đối tượng Promise

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Kết quả trả về của hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

83 là một Promise mới phụ thuộc vào kết quả của Promise trước đó và các hàm xử lý kết quả được truyền vào. Trong hàm logResult ở trên, kết quả trả về là 1 nên nếu Promise tạo ra từ hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

89 có trạng thái là

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

45, thì Promise mới tạo ra từ hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

71 cũng có trạng thái là

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

45 và phản hồi là 1

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Vì vậy, sự khác biệt giữa việc sử dụng Promise với việc sử dụng chức năng gọi lại trực tiếp như ban đầu là gì? . Tương tự như vậy khi bạn muốn lấy kết quả từ đường dẫn A để gửi cho đường dẫn B, nhờ hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

83 cũng trả về một Promise, thay vì hàm gọi lại lồng nhau như

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

30, chúng ta sẽ có một chuỗi đối tượng Promise nối tiếp nhau

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Rõ ràng với Promise, chúng ta đã có những đoạn mã xử lý bất đồng bộ có vẻ dễ nhìn hơn nhiều so với trước đó. Nhưng câu hỏi quen thuộc. nó còn có thể tốt hơn được nữa không?

3. Máy phát điện

Trình tạo cũng là một đối tượng mới được xuất đề trong ES6. Với một hàm thông thường trong Javascript, khi bạn đã định nghĩa xong nội dung cũng như tham số của hàm, bạn sẽ không thể lấy bất cứ điều gì khi hàm đó được thực thi. Trình tạo hàm với khai báo có dấu

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

75 phía sau thì khác, bạn có thể thực thi hàm đó từng bước, lấy ra các giá trị trung gian và thay đổi giá trị của các biến trong hàm. Một ví dụ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Ban đầu, ta sẽ tạo ra một Trình tạo đối tượng từ Trình tạo hàm kể trên

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

Lúc này hàm ví dụ vẫn chưa được thực thi. Chúng ta gọi đến phương thức ________ 476 của đối tượng

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

77 lần đầu tiên, hàm ví dụ sẽ thực thi đến câu lệnh

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

78 thứ nhất. Biến giá trị ________ 479 trong lệnh ________ 520 sẽ được gán cho thuộc tính

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

21 của các đối tượng được trả về từ phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Chúng ta gọi đến phương thức ________ 476 lần thứ hai. Lúc này giá trị tham số đầu tiên được truyền vào phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

76 sẽ thay thế toàn bộ cụm từ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

25 có trong trình tạo hàm. Hàm mẫu tiếp tục thực thi đến câu lệnh _______ 478 thứ hai. Biến giá trị

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

27 sẽ được gán cho thuộc tính

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

21 của đối tượng được trả về từ phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Chúng ta gọi đến phương thức ________ 476 lần thứ ba. Lần này giá trị tham số đầu tiên truyền vào phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

76 sẽ thay thế toàn bộ cụm từ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

42 có trong trình tạo hàm. Vì không có câu lệnh

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

78 phía trước nên hàm ví dụ sẽ thực thi đến hết. Thuộc tính ________ 521 của các đối tượng được trả về từ phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

76 chính là giá trị trả về của hàm

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Vì ví dụ phương thức đã kết thúc, nên chúng ta có gọi đến phương thức

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

76 thêm lần nữa cũng không có ý nghĩa gì

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Chúng ta có thể coi chức năng bắt đầu, kết thúc hàm cộng với các câu lệnh mang lại là các cột, còn câu lệnh

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

76 của Trình tạo đối tượng giống như công việc di chuyển lưu trữ các cột đó. Với các cột

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

78, chúng ta vừa có thể lấy giá trị vừa có thể gán lại giá trị cho các cột đó. Số khoảng cách giữa các cột sẽ bằng số cột chống đi một, nên số câu lệnh

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

76 cần thiết để đi từ đầu hàm đến cuối hàm sẽ nhiều hơn một so với số câu lệnh

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

78 trong hàm

Trình tạo rõ ràng là rất lý thú không đúng. Nhưng nó thì có liên quan gì đến Promise và những phần chúng ta đề cập ở trên nhỉ?

4. Lời hứa & Máy phát điện

Generator giúp chúng ta có thể lấy ra và truyền lại các giá trị vào trong hàm. Ý tưởng ở đây là chúng ta sẽ sử dụng trình tạo để lấy đối tượng Promise ra khỏi hàm chính. Đợi đến khi đối tượng Promise chuyển trạng thái từ

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

44 sang

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

45 hoặc

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

49, chúng ta sẽ đưa ra phản hồi lấy được từ Promise đó trở lại chức năng chính. Như vậy toàn bộ phần xử lý bất đồng bộ sẽ được tách ra khỏi hàm chính

Chúng ta sẽ thử viết một hàm **run_Simple **cơ bản

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

In sao lại sử dụng Promise. giải quyết [hứa]? . Lời hứa. giải quyết [] cho phép chúng ta có thể tạo một lời hứa từ một giá trị xác định hoặc từ một lời hứa khác. Nếu tham số truyền vào Promise. giải quyết [] là một giá trị xác định, thì lời hứa tạo ra sẽ có trạng thái là ______245 và phản hồi thu được chính là giá trị đó. Nếu tham số truyền vào Promise. giải quyết[] là một lời hứa khác, thì lời hứa tạo ra sẽ có trạng thái và phản hồi do đó giống với lời hứa được truyền tham số

Chúng ta có thể đưa run_Simple function vào thư viện. Sau đó, mỗi lần gửi yêu cầu đến đường dẫn nào, chúng ta chỉ cần viết một hàm như sau

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Vì vậy, toàn bộ các đoạn mã liên quan đến xử lý bất đồng bộ đã được che giấu. Bạn có thể viết mã cho một lý do bất đồng bộ [gửi yêu cầu đến một đường dẫn, lấy kết quả và ghi nhật ký ra bảng điều khiển] hoàn toàn giống y như các đoạn mã đồng bộ xử lý thông thường khác

Tuy nhiên, hàm run Simple hiện tại vẫn còn quá yếu. Nó không cho phép truyền tham số vào hàm main. Nó cũng chỉ được phép trong hàm main có chứa một lời hứa duy nhất. Chúng ta có thể cài đặt một hàm ________ 555, phiên bản của cái tiến trình tốt hơn Chắc chắn của hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

56 như sau

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

With run function as on, đoạn mã mô tả

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

30 lồng ghép lúc đầu sẽ được viết lại như sau

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Khác hoàn toàn đúng không?

Có thể viết các dòng mã đồng bộ cho các bộ xử lý bất đồng kết quả là một bước tiến kỳ diệu, nhưng hàm

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

55 kể trên có vẻ hơi phức tạp. Dù Javascript Engine của các trình duyệt hiện đã hỗ trợ Promise với Generator, song để kết hợp hai đối tượng với nhau cũng hơi rối rắm. Tin vui là bạn không cần phát minh lại cái bánh xe. Rút cục bộ, mã nguồn mở để làm gì cơ chứ?

5. Thư viện đồng & đồng yêu cầu

Javascript does not less than library. Một số trong số đó là đồng [Tại sao tôi lại giới thiệu thư viện này chứ không phải thư viện khác? – vì nhiệm vụ của tôi bắt sử dụng]. Trong đó hàm ________ 559 Đóng vai trò chơi như hàm ________ 555 tôi viết ở trên [ Khả năng khả năng

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

59 của họ được viết tốt hơn]. Nếu bạn muốn gửi yêu cầu đến đường dẫn thì có thể sử dụng thêm đồng yêu cầu sự thật hàm

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

37 trong đó cũng có vai trò tạo ra lời hứa như hàm

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

37 tôi viết ở trên [ Chắc chắn rằng

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

37 của họ được viết tốt hơn]

Sau khi bạn cài đặt hai thư viện vào dự án của mình, bạn có thể mã đoạn mã

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

30 mô tả ở đầu như sau

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Sử dụng thư viện của người khác rõ ràng là một ý tưởng không tồi. Nhưng nếu vấn đề bạn cần sử dụng để truy cập thư viện lại là một vấn đề phổ biến đến mức xung đột đến Javascript là gặp phải thì sao? . Thư viện A với thư viện B có cú pháp hoàn toàn khác nhau. Kết quả là để xử lý một chương trình logic giống nhau bằng một ngôn ngữ lập trình giống nhau, bạn vẫn phải học lại. Đương nhiên thời gian học của bạn sẽ rút ngắn hơn thời gian học của những người chưa biết gì, nhưng mất thời gian vẫn là mất thời gian. Chưa kể bạn có thể đối đầu với những cuộc tranh cãi bất tận mang tính tôn giáo, như thư viện A với thư viện B cái nào tốt hơn?

Để đối phó với những phức tạp như thế, chỉ có một tổ chức mà chúng ta có thể tin cậy, đó là Ecma International

6. ES7. Không đồng bộ & đang chờ?

Trình tạo kết hợp với lời hứa đã thay đổi hoàn toàn việc thiết lập trình xử lý những xử lý bất đồng bộ trong javascript. Đã nhận được ý nghĩa rõ ràng cũng như sự biến phổ trong tương lai của họ, nhiều người đã đề xuất đến Ecma International để đưa các cú pháp tiêu chuẩn cho sự kết hợp này vào trong bộ mô tả EMCAScript. Ý kiến được đa phần đồng tình là những hàm tạo có xử lý bất đồng bộ ở bên trong sẽ có cú pháp là

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

06. Và để thể hiện ý nghĩa của các dòng lệnh tốt hơn, trong

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

06, cú pháp

function logResult[response] {
  console.log[response];
  return 1;
} 
request["www.google.com", logResult];

78 sẽ được thay thế bằng

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Đoạn mã liên quan

function request[URL] {
  var xhttp = new XMLHttpRequest[]; 
  //Bất đồng bộ 
  xhttp.onreadystatechange = function[] { 
    if [xhttp.readyState == 4 && xhttp.status == 200] { 
      console.log[xhttp.responseText];
    } 
  }; 
  xhttp.open["GET", URL, true]; 
  xhttp.send[];
}

30 khi đó sẽ thành thế này

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

Và sau khi Javascript Engine của trình duyệt cài đặt các tính năng này theo EMCAScript, bạn có thể tạo ra các đoạn mã xử lý bất đồng bộ xử lý một cách đẹp đẽ như trên, không cần đến thư viện bên ngoài, thậm chí chí chí cũng

Bản đã được công bố chính thức vào tháng 6 năm nay. Rất tiếc là

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

06 và

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

09 đã không được đưa vào đặc tả lần này. Trong khi hi vọng chúng sẽ xuất hiện trong ES8, các bạn có thể tạm thời sử dụng các thư viện và framework đã hỗ trợ

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

06 và

function request[URL, processResult] {
  var xhttp = new XMLHttpRequest[];
  //Bất đồng bộ
  xhttp.onreadystatechange = function[] {
    if [xhttp.readyState == 4 && xhttp.status == 200] {
      //Xử lý kết quả trả về
      processResult[xhttp.responseText];
    }
  };
  xhttp.open["GET", URL, true];
  xhttp.send[];
}

09 như babel chả hạn

Tham khảo

Bài viết thực ra là sự tóm tắt, thuật ngữ và thêm thắt từ cuốn sách You Don't Know JS. Không đồng bộ & Hiệu suất. Bạn nào muốn tìm hiểu chi tiết hơn về Promise và Generator có thể tham khảo thêm trong sách

Bạn có thể đọc miễn phí cả bộ You Don't Know JS tại đây. https. //github. com/getify/Bạn-Không-Biết-JS

Chi tiết việc cài đặt các đối tượng Hứa với các bạn có thể tham khảo một số thư viện Javascript mã nguồn mở. Ví dụ như đây. Lưu ý là không say mê JavaScript Engine của các trình duyệt như V8 JavaScript Engine[được viết bằng C++] cũng như cài đặt các đối tượng Promise giống như các thư viện trên

2. Lời hứa

3. Máy phát điện

4. Lời hứa & Máy phát điện

5. Thư viện đồng & đồng yêu cầu

6. ES7. Không đồng bộ & đang chờ?

Tham khảo

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề