[请益] 前端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