QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

uniapp

【踩坑日志】uniapp的token过期二次请求无法渲染

 shitouadmin  2023-09-25 08:30:20
写uniapp小程序的时候,封装了一个token过期自动清楚token的封装接口,按照理论就是请求之前,加入拦截器,加入token,如果token过期,自动发起请求,然后重新请求接口。但是实际情况是请求成功了,确实无法渲染到小程序页面上。
  1. uni.request({  
  2.                 ...config,  
  3.                 success:(res)=>{  
  4.                     if(res.data.code == 200){  
  5.                         resolve(res.data);  
  6.                     }else{  
  7.                         if(res.data.code == 1001){  
  8.                             uni.removeStorage({  
  9.                                 key:'Token',  
  10.                                 success(res){  
  11.                                     obj.a = 111;  
  12.                                     _request(obj).then(res=>{  
  13.                                         resolve(res);  
  14.                                     });//重新发起请求  
  15.                                 }  
  16.                             });  
  17.                         }else{  
  18.                             resolve(res.data);  
  19.                         }  
  20.                     }  
  21.                 },  
  22.                 fail: (err)=>{  
  23.                     reject(err);  
  24.                 },  
  25.             }); 
研究了好久,试了各种方法,比如改成async...await,或者使用Promise的then方法,或者是吧this改成that,发现都不行,后来发现可能是箭头函数造成的,于是尝试吧上面的success和fail改成普通的函数:
  1. uni.request({ 
  2.                 ...config, 
  3.                 success:function(res)
  4.                     if(res.data.code == 200){ 
  5.                         resolve(res.data); 
  6.                     }else
  7.                         if(res.data.code == 1001){ 
  8.                             uni.removeStorage({ 
  9.                                 key:'Token'
  10.                                 success(res){ 
  11.                                     obj.a = 111; 
  12.                                     _request(obj).then(res=>{ 
  13.                                         resolve(res); 
  14.                                     });//重新发起请求 
  15.                                 } 
  16.                             }); 
  17.                         }else
  18.                             resolve(res.data); 
  19.                         } 
  20.                     } 
  21.                 }, 
  22.                 fail: function(err)
  23.                     reject(err); 
  24.                 }, 
  25.             }); 
竟然正常了


箭头函数和普通函数的区别?

1. 箭头函数比普通函数更加简洁
如果没有参数,就直接写一个空括号即可
如果只有一个参数,可以省去参数的括号
如果有多个参数,用逗号分割
如果函数体的返回值只有一句,可以省略大括号

2. 箭头函数没有自己的this
箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了,之后不会改变。

3. 箭头函数继承来的this指向永远不会改变
  1. var id = 'GLOBAL'
  2. var obj = { 
  3. id: 'OBJ'
  4. a: function(){ 
  5. console.log(this.id); 
  6. }, 
  7. b: () => { 
  8. console.log(this.id); 
  9. }; 
  10. obj.a(); // 'OBJ' 
  11. obj.b(); // 'GLOBAL' 
  12. new obj.a() // undefined 
  13. new obj.b() // Uncaught TypeError: obj.b is not a constructor 
对象obj的方法b是使用箭头函数定义的,这个函数中的this就永远指向它定义时所处的全局执行环境中的this,即便这个函数是作为对象obj的方法调用,this依旧指向Window对象。需要注意,定义对象的大括号{ }是无法形成一个单独的执行环境的,它依旧是处于全局执行环境中。

4. call()、apply()、bind()等方法不能改变箭头函数中this的指向
  1. var id = 'Global'
  2. let fun1 = () => { 
  3. console.log(this.id) 
  4. }; 
  5. fun1(); // 'Global' 
  6. fun1.call({id: 'Obj'}); // 'Global' 
  7. fun1.apply({id: 'Obj'}); // 'Global' 
  8. fun1.bind({id: 'Obj'})(); // 'Global' 
5. 箭头函数不能作为构造函数使用
由于箭头函数时没有自己的this,且this指向外层的执行环境,且不能改变指向,所以不能当做构造函数使用。

6. 箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。

7. 箭头函数没有prototype
8. 箭头函数的this指向哪⾥?
箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于⾃⼰的this,它所谓的this是捕获其所在上下⽂的 this 值,作为⾃⼰的 this 值,并且由于没有属于⾃⼰的this,所以是不会被new调⽤的,这个所谓的this也不会被改变。


¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《【踩坑日志】uniapp的token过期二次请求无法渲染》发布于石头博客文章,作者:shitouadmin,如若转载,请注明出处:https://www.pweb123.com/frame/uniapp/984.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序