Hướng dẫn how to call weather api in javascript - cách gọi api thời tiết trong javascript

Nhiều ứng dụng cần dữ liệu dự báo thời tiết đáng tin cậy hoặc dữ liệu thời tiết lịch sử có thể được truy cập trực tiếp từ mã JavaScript. Chúng có thể đơn giản như một tiện ích dự báo thời tiết, bảng điều khiển dữ liệu thời tiết lịch sử tinh vi được xây dựng bằng thư viện JavaScript như JQuery, D3 hoặc thậm chí là ứng dụng JavaScript phía máy chủ bằng Node.js.

Tất cả các ứng dụng này cần được xây dựng trên API thời tiết vững chắc như API thời tiết giao nhau trực quan. Trong bài viết này, chúng tôi cho thấy những điều cơ bản về việc lấy dữ liệu thời tiết bằng JavaScript.

Bước 1 - Thiết lập tài khoản API thời tiết

Bạn có thể dễ dàng đăng ký tài khoản miễn phí trên trang Dịch vụ dữ liệu thời tiết của chúng tôi. Để biết thêm thông tin, hãy xem cách đăng ký tài khoản dịch vụ dữ liệu thời tiết.

Bước 2 - Tạo yêu cầu API thời tiết

API thời tiết bao gồm nhiều tính năng và tùy chọn. Trong ví dụ này, chúng tôi sẽ sử dụng một yêu cầu đơn giản để chúng tôi có thể tập trung vào việc xử lý JavaScript của yêu cầu và phản hồi. Ví dụ, chúng tôi sẽ sử dụng yêu cầu sau đây để lấy dự báo thời tiết. Nếu bạn muốn xem thêm các ví dụ về API thời tiết, hãy xem một số yêu cầu API thời tiết phổ biến. Xem tài liệu API thời tiết để biết tài liệu đầy đủ và tham chiếu API.

Dưới đây là yêu cầu lấy lại dự báo thời tiết cho một địa điểm duy nhất:

https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/New%20York%20City%2CNY?unitGroup=us&key=YOUR_API_KEY&contentType=json

Lưu ý rằng bạn sẽ cần thay thế ‘your_api_key, bằng khóa API thực tế mà bạn có được ở bước một ở trên.

Bước 2 - Tạo tập lệnh JavaScript để truy xuất dữ liệu thời tiết

Bây giờ chúng tôi đã sẵn sàng để viết một số mã JavaScript để truy xuất dữ liệu thời tiết. Tùy thuộc vào thư viện JavaScript được yêu thích của bạn, chẳng hạn như API tìm nạp, jQuery, D3 hoặc có thể không có thư viện nào, mã chính xác sẽ thay đổi vì vậy chúng tôi sẽ mô tả một số ví dụ chung.

Trong mọi trường hợp, chúng tôi sẽ gửi yêu cầu API ví dụ được thảo luận ở trên. Mỗi yêu cầu sẽ yêu cầu dự báo thời tiết ở định dạng JSON (xem phân tích phân tích phần phản hồi bên dưới). Mỗi trình xử lý sẽ thực hiện một số kiểm tra lỗi cơ bản trước khi chuyển dữ liệu sang phần tiếp theo để hiển thị một số kết quả.

Mẫu 1 - Yêu cầu API tìm nạp

Ví dụ đầu tiên của chúng tôi sử dụng API tìm nạp để truy xuất kết quả API thời tiết. Mặc dù không được hỗ trợ bởi các trình duyệt cũ hơn, tất cả các trình duyệt chính đã hỗ trợ API tìm nạp trong hơn năm năm. Nếu bạn không cần hỗ trợ các trình duyệt cũ hơn và don don cần phải trực tiếp điền vào một thư viện như D3, thì việc tìm nạp có thể là lựa chọn tốt nhất.

fetch("https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/New%20York%20City%2CNY?unitGroup=us&key=YOUR_API_KEY&contentType=json", {
  "method": "GET",
  "headers": {
  }
  })
.then(response => {
  console.log(response);
})
.catch(err => {
  console.error(err);
});

Mẫu API tìm nạp có thể được thực hiện trực tiếp trong tiện ích Trình tạo mã API của chúng tôi trong trang truy vấn dịch vụ dữ liệu thời tiết. Lưu ý rằng mẫu này không xử lý kết quả văn bản hoặc lỗi. Để làm điều đó, một cuộc gọi dựa trên lời hứa khác là cần thiết:

fetch("https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/New%20York%20City%2CNY?unitGroup=us&key=YOUR_API_KEY&contentType=json", {
  method: 'GET', 
  headers: {
 
  },
           
}).then(response => {
  if (!response.ok) {
    throw response; //check the http response code and if isn't ok then throw the response as an error
  }
            
  return response.json(); //parse the result as JSON

}).then(response => {
  //response now contains parsed JSON ready for use
  processWeatherData(response);

}).catch((errorResponse) => {
  if (errorResponse.text) { //additional error information
    errorResponse.text().then( errorMessage => {
      //errorMessage now returns the response body which includes the full error message
    })
  } else {
    //no additional error information 
  } 
});

Trong ví dụ này, chúng tôi sử dụng API tìm nạp để truy xuất dữ liệu và sau đó điều tra phản hồi để kiểm tra các lỗi và sau đó xử lý lỗi hoặc phân tích JSON. Lưu ý rằng mệnh đề ‘sau đó được sử dụng ngay cả trong trường hợp mã phản hồi HTTP không thành công. Đó là lý do tại sao kiểm tra phản hồi.OK được thực hiện. Nếu đó là không thành công, trình xử lý lỗi vẫn được gọi.

Ngoài ra, điều quan trọng là phải kiểm tra cơ thể phản hồi khi các lỗi xử lý vì đó là nơi tìm thấy thông tin gây ra lỗi chi tiết.

Mẫu 2 - Yêu cầu XMLHTTPREQUEST

Trong ví dụ thứ hai của chúng tôi, chúng tôi sử dụng đối tượng yêu cầu XMLHTTPrequest của Trình duyệt.

     function requestXMLHttpRequest() {
        var xhr = new XMLHttpRequest();
        xhr.responseType = "json"; //1
        xhr.open('GET', uri);        
        xhr.send();
        xhr.onload = function() {
            if (xhr.status != 200) { //2
                console.log("XMLHttpRequest error: "+xhr.status);
                return;
            }
            processWeatherData(xhr.response); //3
        };
        xhr.onerror = function() { //4
            console.log("XMLHttpRequest Request failed");
        };
    } 

Mã khá đơn giản. Chúng tôi chỉ ra XMLHTTPREQUEST rằng chúng tôi đang mong đợi đầu ra JSON (dòng 1). Điều này sẽ có nghĩa là XHR.Response được tự động điền là JSON.

Sau đó, chúng tôi yêu cầu dữ liệu từ URI API thời tiết (biến ‘URI, được điền với yêu cầu API thời tiết của chúng tôi).

Chúng tôi thực hiện hai phần xử lý lỗi - hàm onerror của thể hiện XMLHTTPREQUEST (dòng 4). Chúng tôi cũng kiểm tra trạng thái phản hồi HTTP (dòng 2) để đảm bảo nó được đánh dấu là 200.

Cuối cùng, chúng tôi chuyển dữ liệu đến phương thức ProcessWeatherData (mà chúng tôi sẽ thảo luận dưới đây).

Mẫu 3 - Yêu cầu JQuery

Trong ví dụ thứ hai của chúng tôi, chúng tôi sử dụng thư viện jQuery. Một lần nữa, chúng tôi yêu cầu phản hồi thời tiết thông qua yêu cầu GET và vượt qua phản hồi JSON (đã được phân tích cú pháp) cho phương thức ProcessWeatherData. Lưu ý rằng không có yêu cầu sử dụng GET, bạn có thể sử dụng bài đăng thay vì bạn thích.

   function requestjQuery() {
        $.get(uri) .done(function(rawResponse) {
            processWeatherData(rawResponse);
        })
        .fail(function() {
            console.log("jQuery Request failed");
        });
    } 

Mẫu 4 - Yêu cầu D3

Trong mẫu thứ ba của chúng tôi, chúng tôi sử dụng D3. D3 là một thư viện JavaScript để thao tác các tài liệu dựa trên dữ liệu. Nếu bạn đã sử dụng D3 trong ứng dụng hiện tại của mình, bạn có thể sử dụng nó để yêu cầu dữ liệu thời tiết trực tiếp trong thư viện. Mã hoạt động rất giống với mã jQuery:

     function requestd3() {
        d3.json(uri, function(error, rawResponse ) {
            if (error) {
                console.log("d3 error: "+xhr.status);
                return;
            }
            processWeatherData(rawResponse);
        });
    } 

Một lần nữa bằng cách sử dụng phương pháp D3.json mà chúng tôi đã chỉ ra với D3 rằng chúng tôi đang mong đợi một đầu ra JSON. Giả sử rằng không có lỗi nào được gắn cờ, chúng tôi có thể chuyển kết quả trực tiếp cho phương thức ProcessWeatherData của chúng tôi.

Lưu ý rằng chúng tôi có thể đã yêu cầu dữ liệu ở định dạng CSV thay vì JSON. JSON rất dễ sử dụng vì nó được phân tích bằng trình duyệt. Tuy nhiên, nếu bạn đang sử dụng D3 thì sẽ dễ dàng sử dụng CSV thay vì D3 có thể phân tích trực tiếp CSV.

Bước 3 - Xử lý phản hồi

Trong bước trước của chúng tôi, chúng tôi đã lấy thành công dữ liệu thời tiết từ yêu cầu API thời tiết của chúng tôi. Bây giờ chúng ta có thể sử dụng dữ liệu. Trong trường hợp đơn giản này, chúng tôi sẽ xuất một số thông tin cho bảng điều khiển JavaScript.

function processWeatherData(response) {
  
  var location=response.resolvedAddress;
  var days=response.days;
  console.log("Location: "+location);
  for (var i=0;i