uniapp全局拦截封装(一)

复制代码
const baseUrl="http://localhost:3000"

function showToast(msg, icon = 'error') {
  uni.showToast({
    title: msg,
    icon,
  });
}


// 添加拦截器
const httpInterceptor = {
  // 拦截前触发
  invoke(options) {
    // 1. 非 http 开头需拼接地址
    if (!options.url.startsWith('http')) {
      options.url = baseUrl + options.url;

      console.log("url--",options)
    }
    // 2. 请求超时, 默认 60s
    options.timeout = 60 * 1000;

    options.header={...options}
    // 3. 初始化header
     if (isBlank(options.header)) {
       options.header = {};
     }

    // 4. 添加 token 请求头标识
    const token =uni.getStorageSync("token")
 // 获取本地存储的token
    if (token) {
      options.header.Authorization = `Bearer ${token}`;
    }else{
       uni.redirectTo({
         url:"/pages/login/login"
       })
    }
    
  },
};

uni.addInterceptor('request', httpInterceptor);

export const http=(options)=> {
  return new Promise((resolve,reject)=>{
    if(options.loading) uni.showLoading({title: '加载中'});
    uni.request({
      ...options,
      success(res){
          // resolve(res)                
                  const rawData = res.data;
                  if (res.statusCode >= 200 && res.statusCode < 300) {
                    // 判断跟后端约定好的成功标识
                    if (rawData.code !== 0) {
                      showToast(rawData.message, 'none');
                    }
                    resolve(rawData);
                  } else if (res.statusCode === 401) {
                    // token 失效处理
                    reject(res);
                  } else {
                    switch (res.statusCode) {
                      case 404:
                        showToast('请求资源不存在');
                        break;
                      case 500:
                        showToast('服务器错误');
                        break;
                      case 502:
                        showToast('找不到对应服务器');
                        break;
                      default:
                        showToast(rawData?.message || '请求异常');
                        break;
                    }
                    reject(res);
                  }
      },
      complete(){
        if(options.loading) uni.hideLoading();
      },
      fail(err){
          reject(err)
      }
    })
  })
}


二:在api.jsw文件中
import {http} from "../utils/http"
import "../utils/http"

export const getList=()=>{
  return  http({
        method:"GET",
        url:"/api/list",
        loading:true
    })
}
相关推荐
西洼工作室5 小时前
unipp+vue3+python h5+app极验验证码集成全流程解析
前端·uni-app·全栈·极验
RuoyiOffice14 小时前
SpringBoot+Vue3 实现 OA 公文外来文与归档台账:外部收文、BPM办理、三类公文统一归档
spring boot·微服务·uni-app·vue·ruoyi·anti-design-vue·ruoyioffice
云起SAAS2 天前
私域直播系统UniApp源码 多商户商城+直播带货 微信小程序+H5+安卓iOS
android·微信小程序·uni-app·私域直播系统
专科3年的修炼3 天前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
q5507071774 天前
uniapp/uniappx实现原生图片编辑涂鸦、贴图、滤镜、旋转、裁剪等
uni-app
计算机学姐4 天前
基于微信小程序的校园失物招领管理系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·信息可视化·微信小程序·uni-app
2501_915921435 天前
HTTPS前端劫持 新一代流量劫持解决方案
前端·网络协议·ios·小程序·https·uni-app·iphone
爱怪笑的小杰杰5 天前
优化 UniApp 日历组件的多语言切换:告别 setLocale 引起的 App 重启
java·前端·uni-app
计算机学姐5 天前
基于微信小程序的宠物服务系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·微信小程序·uni-app·宠物
2501_915909065 天前
iOS应用签名的三种方法全解析:从官方到第三方工具
android·ios·小程序·https·uni-app·iphone·webview