http 請求被canceled 的一種原因分析

1、需求

在彈出頁面里操作數據，在關閉彈出頁面的同時局部刷新父頁面數據。（不重新加載，防止已經填寫的數據丟失）

2、背景

使用 Vue，layer 進行頁面開發

3、分析

a. 在彈出頁面的js里通過代碼獲取父頁面對象 let obj= window.parent ;

b.獲取父頁面的vue對象，let that = obj.page;(父頁面定義的vue對象名為page)

c.彈出頁面的數據操作通過that對象更新到父頁面

d.關閉彈出頁面

4、代碼實現

function saveChoose(checkDate){
   if(checkDate.length<1){
       layer.msg("請至少選擇一條數據")
        return
    }
   let pwIds = checkDate.join(",");
   let that = window.parent.page;
   $.get('/manage/educationTraining/getWorkers', {
      pwIds:pwIds,
   }, function(res) {
      if(res.code=200){
         let workers = res.result;
         for(var i=0;i<workers.length;i++){
            workers[i].qualified = 1;
         }
         that.workers = workers;
         that.trainingNum = workers.length;
      }
      // 關閉彈出頁面，不再刷新，防止之前的數據丟失 由於此請求是異步，所以應該放在回調函數里，否則請求會被去取消
      window.parent.layer.closeAll();
   })
}

5、注意事項

關閉彈出頁面的操作請務必放在ajax請求的回調函數之內，否則就會出現請求被canceled的情況。

6、其它

關於請求被取消的原因還有跨域問題，其它博客有介紹，如修改成統一的http或者https請求。