uni.request封装-Vue3（支持多域名）

1.定义环境

export const ENV = 'pro' // 生产
// export const ENV = 'dev' // 测试-域名
// export const ENV = 'localLan' // 测试-IP
// export const ENV = 'local1' // 本地 1
// export const ENV = 'local2' // 本地 2

2.定义多域名

export const BASE_LIST = {
  app: {
    pro: 'https://xxx.xxx.xxx',
    dev: 'https://xxx.xxx.xxx',
    localLan: 'xxx.xxx.xxx',
    local1: 'http://192.168.1.1:21',
    local2: 'http://192.168.1.2:20',
    tokenKey: 'authorization',
    tokenPrefix: '',
    contentTypeKey: '',
    headers: {
      tenantCode: 10001,
      platform: 'minipro',
      domain: 'admin_platform',
    },
  },
  // ...其他域名
}

3.数据格式

const contentType = {
 json: 'application/json; charset=utf-8',
 form: 'application/x-www-form-urlencoded',
 formData: 'multipart/form-data',
}

4.拦截器

const httpInterceptor = {
  invoke(options) {

    const token = ''

    if (!options.url?.startsWith('http') && !options.url?.startsWith('https')) {
      const _T = options.requestType
      if (_T) {
        url = BASE_LIST[_T][ENV] + options.url
      } else {
        url = BASE_LIST['app'][ENV] + options.url
      }
    } else {
      url = options.url
    }

    options.url = url
      
    options.header = {
      ...options.header,
      ...BASE_LIST[options.requestType || 'app'].headers,
    }
      
    if (user_status) {
      options.header.userStatus = user_status
    }
      
    options.timeout = 16000
      
    if (options.contentTypeKey) {
      options.header['Content-type'] = contentType[options.contentTypeKey]
    }

    if (token) {
      const t = options.requestType || 'app'
      const _TOKENS = BASE_LIST[t].tokenKey

      if (Array.isArray(_TOKENS)) {
        _TOKENS.forEach((item) => {
          options.header[item] = BASE_LIST[t]['tokenPrefix'] + token
        })
        return
      } else {
        options.header[_TOKENS] = BASE_LIST[t]['tokenPrefix'] + token
      }
    }
	
    // 删除属性
    delete options['from']
    delete options['contentTypeKey']
    delete options['requestType']
  },
}
uni.addInterceptor('request', httpInterceptor)

5.请求方法HTTP

export function http(options) {
  let _From = options.from ? options.from : ''
  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        console.log(
          `%cHTTP-Success：${_From}%c`,
          'background: #00cc09; color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px',
          'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px',
          res
        )
        resolve(res.data)
      },
        
      fail: (err) => {
        console.log(
          `%cHTTP-Error：${_From}%c`,
          'background: rgb(233, 51, 35); color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px',
          'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px',
          err
        )
        reject(err)
        uni.showToast({
          title: '网络错误',
          icon: 'error',
          mask: true,
        })
      },
        
      complete(res) {
        console.log(`
        ------------------------------------
        request-complete:${JSON.stringify(res)}
        ------------------------------------
        `);
      }
    })
  })
}

6.添加到uni实例

uni.http = http

7.初始化uni.http

main.js引入文件，初始化http方法

import { createSSRApp } from 'vue'
import App from './App.vue'

#注意文件位置
import '@/utils/http'
 
export function createApp() {

  const app = createSSRApp(App)

  return {
    app,
  }
}

8.使用

/**s
 * @description 请求配置，根据项目配置
 * @property dev: 开发环境
 * @property pro: 生产环境
 * @property tokenKey: token在header中的key，配置多个时，需使用数组
 * @property tokenPrefix token在header中的前缀,需要加 Bearer 的时候配置
 * @property contentTypeKey: contentType的值 【json: application/json  form: application/x-www-form-urlencoded  formData: multipart/form-data】
 * @property headers: 单独配置请求头,勿在此配置token
 * @example uni.http({
        url: '/xx/xx/xx',
        method: 'POST',
        data:data,
        requestType: 'app',
        tokenKey: 'token',
        tokenPrefix:'Bearer ',
        contentTypeKey: 'json',
        headers: {
        }
    })
 */

// 方式1
export function getHomeDataApi(data) {
  return uni.http({
    url: '/home/data',
    method: 'post',
    data,
    from: '获取首页数据',
  })
}

// 方式2
export function getHomeDataApi(data) {
  return uni.http({
    url: '/home/data',
    method: 'post',
    data,
    from: '获取首页数据',
    tokenKey: 'Token',
    tokenPrefix: 'Pro ',
    contentTypeKey: 'json',
    headers: {
      testCode: 1002,
    },
    requestType: 'app',
  })
}

DCloud插件市场：request请求、多域名、日志清晰、配置简单、方便二次开发 - DCloud 插件市场