今天在使用jquery ajax嵌套的過程中遇到了一個報錯,令人十分頭痛。下面我來分享一下我的經歷。
第一次ajax請求代碼:
$.ajax({ url: '/api/data', type: 'GET', success: function(result) { console.log(result); }, error: function(error) { console.log(error); } });這段代碼沒有問題,成功獲取到了數據。但是我需要根據數據的id再次請求一次ajax獲取詳細信息,于是我在success回調函數中添加了第二個ajax請求:
$.ajax({ url: '/api/data', type: 'GET', success: function(result) { console.log(result); $.ajax({ url: '/api/detail/' + result.id, type: 'GET', success: function(detail) { console.log(detail); }, error: function(error) { console.log(error); } }); }, error: function(error) { console.log(error); } });但是當我運行這段代碼時,卻出現了一個奇怪的錯誤:Uncaught TypeError: Cannot read property 'id' of undefined。 我翻了半天文檔才發現,這個錯誤是因為第一次ajax請求并沒有立即完成,所以在第二次ajax請求中result還是undefined,導致無法取到id。這就是異步請求的一個坑,讓我大失所望。 為了解決這個問題,我發現可以使用Promise對象來實現異步順序執行。修改后的代碼如下:
var promise1 = $.ajax({ url: '/api/data', type: 'GET' }); promise1.then(function(result) { console.log(result); return $.ajax({ url: '/api/detail/' + result.id, type: 'GET' }); }).done(function(detail) { console.log(detail); }).fail(function(error) { console.log(error); });這段代碼通過使用Promise對象,確保第二次ajax請求在第一次請求成功后再執行,有效避免了undefined的問題。 總之,使用jquery ajax嵌套時一定要小心異步請求的坑,不能輕易嵌套,否則會導致代碼報錯。記得使用Promise對象來解決異步請求的順序執行問題。
上一篇在網頁中輸入css