[請益] 前端async的問題

[asleepme (500年沒換暱稱了)]

想請教前端的大大這個應該是很基本的問題
一開始在頁面上列出很多個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

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.140.253.26
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1535017694.A.3C1.html
推 LERICAL: 在 function(event){} 開頭寫個 var that = this，然後
→ LERICAL: 後面都用 that
推 eggli: 關鍵字是this, binding, scope, javascript
推 SunNEET: 其實有ajax版XD
推 Sunal: 好ES6不用嗎
推 peanut97: 在success那裡的 function(response){} 改成(res)=>{}
→ peanut97: 使用ES6的Arror Function 就能避開this的問題
推 pilor: 有 Web版
→ iphoneX5566: 臉書有 JavaScript.tw 社團喔
→ ywbBetter: 全部改成await
→ arthur01832: 臉書也有Frontend Developers Taiwan喔
→ wonyeouuu: Function.prototype.bind
推 LoserWon: 想回答的都被講完了 看來強者都在這板
推 youuuuuli: 高手如雲
→ asleepme: 感謝高手大大們～ PTT的ajax跟web_design板看起來冷清
→ asleepme: 這裡的討論比較熱烈而且很有深度!
推 scps960740: 這是this bind的問題 因為axios的callback在執行的時
→ scps960740: 候this會指向window 在callback的後面加上.bind(this)
→ scps960740: 就可以綁定onclick的this了
推 scps960740: 推薦去看這篇文章 介紹的很詳細 https://ithelp.ithom
→ scps960740: e.com.tw/m/articles/10193193
推 DolphinLinn: ES6 Arrow Function 綁定this 的scope 還有看到jq覺
→ DolphinLinn: 得頭很痛 看你要不要改document.querySelector
→ async: 都我的問題
推 pennymarkfox: asynchronize真的很整人，但也是很重要的基礎