微信小程序（四十九）拦截器处理登入失败情况

代码对我眨眼睛2024-03-08 18:35

注释很详细，直接上代码

新增内容：

1.拦截器判断处理失败与成功的情况

2.使用拦截器拒绝失败的情况，使网络请求后面的逻辑步骤不会执行

源码：

index.wxml

xml 复制代码

<button type="primary" bind:tap="onSubmit">登入</button>

index.js

js 复制代码

Page({
  data:{
    mobile:'14444444444',
    code:'123456'//随便填的错误的验证码（成功的情况在之前的文章中演示了，这里主要演示错误的情况）
    //如果需要尝试正确的验证码在浏览器输入`https://live-api.itheima.net/code?mobile=14444444444`即可获取正确的验证码
  },
   //验证验证码
   async onSubmit(){
    const mobile=this.data.mobile
    const code=this.data.code

    //上传手机号和验证码进行验证
    const res= await wx.http.post('/login',{mobile,code})
    console.log(res)
    //因为已经使用了拦截器判断成功与失败的情况所以无需再判断
    const app=getApp()

    //调用全局函数setToken
    //参数1为传递的变量的名字
    //参数2为变量的值
    app.setToken('token',this.data.initToken)

    app.setToken('refreshToken',this.data.initRefreshToken)
    
    //这里打印全局变量看一下
    console.log('token:'+app.token)
    console.log('refreshToken:'+app.refreshToken)
  }
})

utils/http.js

js 复制代码

import http from "wechat-http"


//设置全局默认请求地址
http.baseURL = "https://live-api.itheima.net"

//设置响应拦截器
http.intercept.response=(res)=>{
    if(res.data.code===10000){
      //成功的情况
      return res.data
    }
    else{
      //其他情况
      wx.showToast({//弹窗提醒
        title: res.data.message||'业务错误',
        icon:'none'
      })

        //主动返回失败的 Promise ，不执行业务 await后续代码
        //因为成功和失败的情况的逻辑是不一样的
        //进行到这里会主动报个错，但不会影响运行
        return Promise.reject(res.data)
    }
}

//导出
export default http

app.js

js 复制代码

//从utils导入http
import http from './utils/http'

//注册到全局wx实例中
wx.http=http

App({
  //提前声明的变量名
  token:wx.getStorageSync('toke'),
  refreshToken:wx.getSystemInfoAsync('refreshToken'),
  
  setToken(key,token){
    //保存token到全局（中括号使这个key表示的变量名）
    this[key]=token

    //保存token到本地缓存
    wx.setStorageSync(key, token)
  }

 })

效果演示：

微信小程序（四十九）拦截器处理登入失败情况

新增内容：

1.拦截器判断处理失败与成功的情况

2.使用拦截器拒绝失败的情况，使网络请求后面的逻辑步骤不会执行

(红色的报错是因为我们设置拦截器判断并拒绝了失败的情况，不影响程序运行)