vue中ajax返回的结果赋值

谁借莪１个温暖的怀抱￠ 2021-08-13 22:04 481阅读 0赞

公司要和集团对接统一登陆，集团给了一个接口文档

TAL_UC.detailUser({
        success: function (res) {
            console.log(res)
        },
        fail: function (error) {
            console.log(error)
        }
    })

现在用vue写项目，这个请求怎么有点像ajax？有成功的回掉函数，失败的回掉函数  
但是写在vue里合适吗？不用axios吗？  
没办法，集团给的，那就吧这个写在vue里面吧  
**首先是在data中变量初始化赋值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]  
**在created里 初始化数据，也就是请求接口(为防止数据获取慢报错，加一个定时器保险)**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]  
**接下来就是在集团给的实例代码，对必填参数进行获取**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]  
看起来和vue操作很像嘛，也不过如此  
但是。。。。。 这里数据可以输出，在页面通过差值表达式或者数据绑定，根本获取不到数据  
？？？

### 最后的原因是ajax指向的不是vue的实例 ###

### 解决办法可以先把this保存起来 ：var that = this ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]

总结

1.  看起来像ajax的代码，可能就是对ajax的封装
2.  既然是对ajax的封装，在vue中使用ajax就要考虑要注意的问题
3.  可以排查问题，比如生命周期，数据是否获取到，看同事之前有没有类似代码可以copy
4.  如果以上都解决不了，不烦把你遇到的问题百度，把你心中所想写出来：vue中使用ajax能获取数据，但是不能渲染

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/d926d8050f81471da1ee816d51061766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210813/411d002fbb7343d8bd2312b02d82ec4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210813/ea2dfb12e265457f8a0e29bec9bc6ba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210813/6cfedc70db804331a8c952801341c5e8.png