uniapp之请求拦截器＜十分实用＞

api.js

export const api = {
          
   
  // 默认请求就是get请求
  user: {
          
   
    url: /auth/wx/login,
    name: 用户信息,
    method: POST
  },
  info: {
          
   
    url: /wxsystem/user/getInfo,
    name: 用户信息,
    method: GET
  },
}

env.js 环境配置

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


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



const config = {
          
   
  dev,
  prod,
  test,
}

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

export  {
          
   
  baseURL,
  appKey
}

请求类型和方法

import {
          
    fetch } from ./request.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)
}

拦截器

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( uni.getStorageSync(token)) {
          
   
    header = {
          
    Authorization: Bearer +uni.getStorageSync(token) }
  }
  opt.header = {
          
   ...opt.header,...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.data)
} 

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


export {
          
    fetch }

main.js添加

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

使用用例

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