uniapp之请求拦截器和响应拦截器的使用

2023-11-05

目录如下

在这里插入图片描述

api.js (api配置)


export const api = {
  // 默认请求就是get请求
  user: {
    url: '/user',
    name: '用户信息',
    method: 'GET',
  },
}

env.js (环境配置)

// prod 生产 dev 开发
const env = "test"


const prod = {
  url: 'https://localhost:5000', // 线上环境'
  appKey: 'WX_MINI_MEHZ'
}
const dev = {
  url: 'https://localhost:5000', // 生产环境'
  appKey: 'WX_MINI_MEHZ'
}
const test = {
  url: 'https://localhost:5000', // 测试环境'
  appKey: 'WX_MINI_MEHZ'
}



const config = {
  dev,
  prod,
  test,
}

let baseURL = config[env].url;
let appKey = config[env].appKey

export  {
  baseURL,
  appKey
}

interceptors (拦截器)

import { baseURL } from './env.js'

import { api } from './api.js'

import Store from '@/store/index.js'


// 请求拦截
const fetch = (url,opt) => {
  console.log("opt",opt)
  let urls = (api[opt.url]?.url || api[url]?.url);
  let params = opt.params ? ('?'+Object.keys(opt.params).map(key=>key+'='+opt.params[key]).join('&')) : ''
  opt.url = baseURL + urls + params
  opt.method = opt.method || "GET";
  var header = {}
  if( Store.state.user.token) {
    header = { Authorization: Store.state.user.token }
  }
  opt.header = {...opt.header,...header}
  console.log("header",opt.header)
  opt.data = opt.data || {};
  return new Promise((resolve,reject) => {
    let options = {}
    Object.keys(opt).map(key=>{
     if(key !== "params") {
       return options[key] = opt[key]
     }
    })
    uni.request(options)
    .then(res => interceptorsRes(res,resolve,reject))
    .catch(err=> interceptorsErr(err,reject))
  })
}

// 响应拦截
const interceptorsRes = ([err,resp],resolve,reject) => {
  const { code } = resp.data
  if(code == 200) {
    console.log("请求成功")
  }
  if(code == 401) {
    console.log("未授权,跳转回登录页")
  }
  resolve(resp)
} 

// 异常处理
const interceptorsErr = (err,reject) => {
  console.log("网络异常",err)
  reject(err)
}


export { fetch }

index.js (导出配置)


import { fetch } from './interceptors.js'

const obj = {
  headerGET: {
    "Content-type":'application/x-www-from-urlencoded'
  },
  headerPOST: {
    "Content-type":'application/json'
  },
}

// 通用接口请求
export const reqAll = (url,params,opt={}) => {
  opt.data = params
  opt.header = obj['headerPOST']
  return fetch(url,opt)
}

// get请求
export const reqGet = (url,params,opt={}) => {
  opt.header = obj['headerGET']
  opt.method = "GET"
  opt.data = params
  return fetch(url,opt)
}

// post请求
export const reqPost = (url,params,opt={}) => {
  opt.header = obj['headerPOST']
  opt.method = "POST"
  opt.data = params
  return fetch(url,opt)
}




main.js (注入)


import { reqAll, reqGet, reqPost } from './fetch/index.js'
Vue.prototype.$reqAll = reqAll;
Vue.prototype.$reqGet = reqGet;
Vue.prototype.$reqPost = reqPost;

页面使用

    getUserInfo1() {
        this.$reqPost("user").then(res=>{
          console.log("res",res)
        })
      },

页面展示

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp之请求拦截器和响应拦截器的使用 的相关文章

随机推荐

  • 华为OD机试 - 事件推送(Python)

    题目描述 同一个数轴X上有两个点的集合A A1 A2 Am 和B B1 B2 Bn Ai和Bj均为正整数 A B已经按照从小到大排好序 A B均不为空 给定一个距离R 正整数 列出同时满足如下条件的所有 Ai Bj 数对 Ai lt Bj
  • LaTeX 排版常用技巧 - 逐渐积累

    1 箭头上的文字 你的文字 underrightarrow text 你的文字 你的文字 underrightarrow text 你的文字 更喜欢另一种方式 CPU stackr
  • 散列表查找成功和不成功时的平均查找长度

    已知散列表长度为13 散列函数为H key key 11 处理冲突的方法为线性探测法 请画出依次插入关键字 10 8 40 27 21 57 46 23 19 56 以后的散列表 并计算查找成功和不成功时的平均查找长度 解 散列表是哈希表的
  • 用Ajax实现不刷新页面修改内容

    趁今天有空 就学习了Ajax 在Ajax in action那本书里提到了SAjax 就去下来看看 果然功能强大 让编写Ajax代码变的很简单 于是就写了个 修改内容不刷新页面 的代码 这个功能在网上以前是到处看到 今天终于自己实现了个 代
  • Spring boot本地运行正常,请求正常,打包后运行正常,但是请求报错:invalid bound statement (not found) 的问题

    Spring boot本地运行请求正常 打包后运行正常 但是请求报错 invalid bound statement not found 的问题 问题场景 项目结构 初步分析 接着踩坑 原因 个人问题 总结 问题场景 这个问题发生在我准备将
  • 数据仓库、数据开发面经

    目录 一 前言 二 关于内推or猎头or招聘软件的选择 三 面试形式 四 面试流程选择
  • 【经典蓝牙】 蓝牙HFP层协议分析

    HFP 概述 HFP概念介绍 HFP Hands Free Profile 是蓝牙免提协议 可以让蓝牙设备对对端蓝牙设备的通话进行控制 例如蓝牙耳机控制手机通话的接听 挂断 拒接 语音拨号等 HFP中蓝牙两端的数据交互是通过定义好的AT指令
  • Symbol SysTick_Handler multiply defined (by port.o and bsp_timer.o).

    Symbol SysTick Handler multiply defined by port o and bsp timer o Symbol PendSV Handler multiply defined by port o and s
  • PADS9.5光绘文件输出教程

    目录 光绘文件输出前准备 先执行灌铜 特别注意混合分割层 开短路检查 注意安全间距的验证选项 光绘文件生成 线层 丝印层 阻焊层 钢网层 钻孔图 数控钻孔 线层 阻焊层 丝印层 钢网层GERBER系统生成 钻孔图和数控钻孔生成 对软件生成光
  • Hadoop001存储模型

    HDFS 存储模型 思想 1 化整为0 2 并行计算 第一步 如果一个文件非常非常大 单台服务器的内存无法处理这样一个大文件 无法一次性加载到内存中 可以对文件切割成若干个小文件 第二步 为了达到提升计算效果的目的 可以把切割的小文件分散发
  • c语言面向过程到面向对象,c++ 面向过程 c语言面向对象:列表

    主要利用结构体和函数指针 实现面向对象编程中的封装 继承和多态 base htypedef struct BaseClass int m Data void xjbclz 2016年06月04日 22 35 1272 我们知道嵌入式是在操作
  • 设置windows宿主机内的Linux虚拟机的端口开放

    比如希望开放的是windows内的Linux虚拟机 IP地址 172 30 2 1611 端口 27017 则在windows主机中 用管理员权限打开控制台 并输入 netsh interface portproxy add v4tov4
  • JavaScript 函数防抖(debounce)的实现

    函数防抖是什么 函数防抖是指对于在事件被触发n秒后再执行的回调 如果在这n秒内又重新被触发 则重新开始计时 是常见的优化 适用于 表单组件输入内容验证 防止多次点击导致表单多次提交 等情况 防止函数过于频繁的不必要的调用 代码实现 思路 用
  • tomcat部署项目,ip+端口直接访问项目的三种方式

    部署web项目 需要ip 端口 项目名 路径访问项目 如localhost 8080 springmvc xxx 现在想去掉项目名springmvc 直接输入 localhost 8080 就能访问 三种配置 方式一 项目打war包放到to
  • Makefile文件的简单编写

    参考 MakeFile文件是什么 内容 工作原理 作用 使用 嵌入式操作系统linux篇 书 Makefile伪目标 GNU make中文手册 pdf 在嵌入式开发中 一个工程中的源文件是非常多的 如果一个个编译会很麻烦 Makefile的
  • 寻找SQL注入点

    如果要对一个网站进行SQL注入攻击 首先就需要找到存在SQL注入漏洞的地方 也就是寻找所谓的注入点 可能的SQL注入点一般存在于登录页面 查找页面或添加页面等用户可以查找或修改数据的地方 最常用的寻找SQL注入点的方法 是在网站中寻找如下形
  • PyTorch错误定位系列之DDP训练中 double free or corruption (out)

    背景 最近觉得单卡训练有点慢了 在纠结pytorch lightning和原始distributed训练中选择哪里 最后 从学习的角度选了原生的单机多卡训练 DDP 方式 结果 就把自己埋坑里了 问题 代码写完后 通过torch distr
  • Transformer 模型详解

    本内容主要介绍 Transformer 模型的具体实现 转载自 Transformer 模型详解 https blog csdn net benzhujie1245com article details 117173090 文章目录 1 T
  • npm : 无法加载文件 D:\appCache\nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本。

    鄙人在vscode 下面打开终端运行 npm init y 时 发现居然报错 报错的内容是 npm 无法加载文件 D appCache nodejs node global npm ps1 因为在此系统上禁止运行脚本 问题原因 在此系统上禁
  • uniapp之请求拦截器和响应拦截器的使用

    拦截器 目录如下 api js api配置 env js 环境配置 interceptors 拦截器 index js 导出配置 main js 注入 页面使用 页面展示 目录如下 api js api配置 export const api