「Uncaught TypeError：nullのプロパティ 'token'を読み取れません」というエラーが表示されます。

発生している問題

エラーが表示されます。解決方法を教えてください！

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <title>Microsoft Translator テキスト API で英訳を行うサンプルコード</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <h1>Microsoft Translator テキスト API サンプル</h1> <h2>フォームの入力データを英語に翻訳します。</h2> <div id="japanese"></div> <input type="text" id="inText" oninput="inputText()" placeholder="入力してください"> <div id="endMsg">入力完了と判定しました<br>入力：</div> <script type="text/javascript"> "use strict"

  var gTimer; 
  function inputText(){
    // =========================================================
    //   入力の度に実行される
    //     入力完了までタイマーで実行待ちする
    //     タイマーまでに次の入力があると、再度タイマー設定
    // =========================================================
    // --- サンプル用 メッセージ出力 -------------------
    var wObj	= document.getElementById("endMsg");
    wObj.innerHTML = '入力中です';
    wObj.className = 'defStyle runStyle';
    // =============================================
    //   一定時間を待って入力完了と判断 
    // =============================================
    if(gTimer){clearTimeout(gTimer);}
    gTimer = setTimeout(inputEnd, 700);
  }




  function inputEnd(){
    // =========================================================
    //   タイマー時間経過で入力完了と判断
    // =========================================================
    // サンプル用の処理です。入れ替えて利用ください
    // 入力完了後のメッセージ入れ替え
    var wObj	= document.getElementById("endMsg");
    wObj.innerHTML = '入力完了と判定しました<br>入力：'+document.getElementById("inText").value;
    wObj.className = 'defStyle endStyle';
    // 現在の時刻をUNIX Time に変換して取得
  
    const now = new Date();
    const nowtime = now.getTime();
  
    // 認証トークンを取得するための関数 [getToken] を定義
    // http://docs.microsofttranslator.com/oauth-token.html
  
    const getToken = function() {
      const defer = $.Deferred();
  
    // 現在時刻と、sessionStorageに保存されている時刻を比較
    // sessionStorageに保存されているトークンが8分以内に発行されたものであれば、そのまままトークンを返す
    // 8分以上経っている場合、もしくはトークンが存在しない場合、新規にトークンを取得。
    // 取得したトークン、および取得時間をUNIX Time に変換したデータをJSON [datalist] に格納
    // sessionStorage [tdata] にJSONを保存する
  
      const arr = JSON.parse(sessionStorage.getItem("tdata"));

      if (arr === null || arr.time + 1000 * 60 * 8 < nowtime) {
        $.ajax({
          url: 'https://api.cognitive.microsoft.com/sts/v1.0/issueToken',
          type: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/jwt',
            'Ocp-Apim-Subscription-Key': 'キーを入力する',
          },
          async: true,
        }).done(function(data) {

          const datalist = {
            time: nowtime,
            token: data,
          }
          sessionStorage.setItem('tdata', JSON.stringify(datalist));
        });
      }

      // sessionStorage に保存されたデータを変数 arr2 に格納
      // JSONを文字列に変換後、トークンデータを引き出して翻訳用の関数にひきわたす

      const arr2 = JSON.parse(sessionStorage.getItem("tdata"));
      const token = arr2.token;
      defer.resolve(token);
      return defer.promise();
    };

   // 関数 [getToken] 実行後、取得したトークンを 受け取る
   // フォームから入力したデータとともに、 Microsoft Translator テキストAPIへ送信


    $.when(getToken()).done(function(token) {
      const key = 'Bearer ' + token;
      const text = $("#inText").val();
      const response = $.ajax({
          url: 'https://api.microsofttranslator.com/v2/http.svc/Translate',
          type: 'GET',
          data: {
            'appid': key,
            'Accept': 'application/xml',
            'text': text,
            'to': 'en',
          },
          async: true,
        })

    // Translator テキスト APIを通じて取得したデータから、翻訳語が含まれるプロパティを取得
    // replace関数でタグを除去し、翻訳データのみを抽出して表示する

      const data = response.responseText;
      const translation = data.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
      $("#japanese").text(translation);

    })
  }

</script> </body> </html>