[請益] 前端async的問題

作者: asleepme (500年沒換暱稱了)   2018-08-23 17:48:11
想請教前端的大大這個應該是很基本的問題
一開始在頁面上列出很多個items,每個item會有一個加入的按鈕
點了加入之後,就會透過ajax去call api在後端db紀錄下來
到這邊都沒什麼問題
但是想在前端把剛剛item的加入按鈕變成不能點,文字也變成已加入
code snippet像這樣
$('.btn-add-favorite').click(function(event) {
axios.post('/favorite/add', {
itemId: $(this).data("item-id")
})
.then(function (response) {
// handle success
$(this).attr('disabled', true);
$(this).html('已加入');
})
.catch(function (error) {
// handle error
});
});
不過顯然在success那邊用this不會是同樣的node
通常這種應用要怎麼找到原本的node呢?
目前想到的作法,就是每個item塞一個unique id
進到click後把id用變數存下來
success那邊再用dom把這個id找出來處理
不知道比較好的作法是什麼呢?
P.S. 我在ptt或facebook上找不太到適合討論這類問題的板,有推薦的討論區嗎...
這個問題keyword不知道要下什麼, stack overflow上不知道怎麼找 T_T
作者: LERICAL (統二布丁)   2018-08-23 17:50:00
在 function(event){} 開頭寫個 var that = this,然後後面都用 that
作者: eggli (eggli)   2018-08-23 18:14:00
關鍵字是this, binding, scope, javascript
作者: SunNEET (老桑)   2018-08-23 18:27:00
其實有ajax版XD
作者: Sunal (SSSSSSSSSSSSSSSSSSSSSSS)   2018-08-23 18:44:00
好ES6不用嗎
作者: peanut97 (丁丁)   2018-08-23 18:54:00
在success那裡的 function(response){} 改成(res)=>{}使用ES6的Arror Function 就能避開this的問題
作者: pilor (Formosa)   2018-08-23 19:35:00
有 Web版
作者: iphoneX5566 (喔吼喔吼)   2018-08-23 20:10:00
臉書有 JavaScript.tw 社團喔
作者: ywbBetter (小Bu)   2018-08-23 22:37:00
全部改成await
作者: arthur01832   2018-08-23 23:01:00
臉書也有Frontend Developers Taiwan喔
作者: wonyeouuu (小明)   2018-08-24 00:58:00
Function.prototype.bind
作者: LoserWon (魯蛇王)   2018-08-24 01:08:00
想回答的都被講完了 看來強者都在這板
作者: youuuuuli (球給保羅)   2018-08-24 09:37:00
高手如雲
作者: asleepme (500年沒換暱稱了)   2018-08-24 10:39:00
感謝高手大大們~ PTT的ajax跟web_design板看起來冷清這裡的討論比較熱烈而且很有深度!
作者: scps960740 (BlueSky)   2018-08-24 13:23:00
這是this bind的問題 因為axios的callback在執行的時候this會指向window 在callback的後面加上.bind(this)就可以綁定onclick的this了推薦去看這篇文章 介紹的很詳細 https://ithelp.ithome.com.tw/m/articles/10193193
作者: DolphinLinn (怕水海豚)   2018-08-27 08:58:00
ES6 Arrow Function 綁定this 的scope 還有看到jq覺得頭很痛 看你要不要改document.querySelector
作者: async (非同步)   2018-08-27 09:30:00
都我的問題
作者: pennymarkfox (潘尼老狐狸)   2018-08-28 17:28:00
asynchronize真的很整人,但也是很重要的基礎

Links booklink

Contact Us: admin [ a t ] ucptt.com