1.环境配置 (可参考uni-官网的环境配置)

common文件夹下新建config.js

let url_config = ""

if(process.env.NODE_ENV === 'development'){
// 开发环境
url_config = 'https://*****.com/'
}else{
// 生产环境
url_config = 'https://*****.com/'
} export default url_config

2.uni.request封装

common文件夹下新建request.js

import urlConfig from './config.js'

const request = {}
const headers = {}
const PORT1 = '/baseinfo' request.globalRequest = (url, method, data, power) => {
/* 权限判断 因为有的接口请求头可能需要添加的参数不一样,所以这里做了区分
1 == 不通过access_token校验的接口
2 == 文件下载接口列表
3 == 验证码登录 */ switch (power){
case :
headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='
break;
case :
headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='
break;
case :
responseType = 'blob'
break;
default:
headers['Authorization'] = `Bearer ${
this.$store.getters.userInfo
}`
headers['TENANT-ID'] = this.$store.getters.userInfo.tenant_id
break;
} return uni.request({
url: urlConfig + url,
method,
data: data,
dataType: 'json',
header: headers
}).then(res => {
if (res[].data.status && res[].data.code == ) {
return res[]
} else {
throw res[].data
}
}).catch(parmas => {
      switch (parmas.code) {
        case 401:
          uni.clearStorageSync()
          break
        default:
          uni.showToast({
            title: parmas.message,
            icon: 'none'
          })
          return Promise.reject()
          break
      }
  })
 } 

export default request

3.接口配置

项目根目录下新建api文件,api下新建index.js

import request from '@/common/request.js'
import { formatGetUri } from '@/common/util.js' const api = {}
const PORT1 = 'baseinfo'
// POST请求方式
api.register = params => request.globalRequest(`${PORT1}/mobile/signUp`, 'POST//必须大写,为了兼容其他应用', params, )
// GET请求方式
api.register = params => request.globalRequest(`${PORT1}/mobile/signUp${formatGetUri(params)}`, 'GET //必须大写,为了兼容其他应用',{}, 1)
export default api

4. 新建common/util.js

/**
* 拼接对象为请求字符串
* 对于需要编码的文本(比如说中文)我们要进行编码
* @param {Object} obj - 待拼接的对象
* @returns {string} - 拼接成的请求字符串
**/
export function formatGetUri(obj: Object) {
const params: Array<string> = []
Object.keys(obj).forEach((key) => {
let value = obj[key]
if (typeof value !== 'undefined' || value !== null) {
params.push([key, encodeURIComponent(value)].join('='))
}
})
return '?' + params.join('&')
}

  

5.全局配置

在main.js中新增

import Vue from 'vue'
import App from './App'
import store from './store' // 与vue项目中配置相同,可自行配置 import request from './common/request.js'
import api from './api/index.js'
import url from './common/config.js' Vue.config.productionTip = false
Vue.prototype.$request = request
Vue.prototype.$api = api
Vue.prototype.$url = url App.mpType = 'app' const app = new Vue({
...App,
store
}) app.$mount()

5.接口调用

this.$api.register({mobile: this.mobile}).then(res => {
// 获得数据
console.log(res)
}).catch(res => {
  // 失败进行的操作
})

6.推荐

在uni-app扩展组件中找到了一个封装的案例,大家如果觉得可以的话,可试用  request网络请求,支持拦截器,支持回调函数和Promise

官网推荐request封装

uni-app 环境配置,uni.request封装,接口配置,全局配置,接口调用的封装的更多相关文章

  1. 小程序api请求层封装(Loading全局配置)

    前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封 ...

  2. vue.config.js 配置 scss,less,sass全局配置 vuecli3

    module.exports = { /* 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath */ public ...

  3. 微信小程序-全局配置、组件、页面跳转、用户信息等

    全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/ ...

  4. 【源码分析】FastJson全局配置日期格式导致@JSONField(format = "yyyy-MM-dd")注解失效

    出现的问题 我全局配置的时间格式是:yyyy-MM-dd HH:mm:ss @JSONField注解配置的时间格式是:yyyy-MM-dd 最终的返回结果是:yyyy-MM-dd HH:mm:ss 问 ...

  5. Log4Net 在ASP.NET WebForm 和 MVC的全局配置

    使用log4net可以很方便地为应用添加日志功能.应用Log4net,开发者可以很精确地控制日志信息的输出,减少了多余信息,提高了日志记录性能.同时,通过外部配置文件,用户可以不用重新编译程序就能改变 ...

  6. Vue-API之全局配置

    API 全局配置 Vue.config 是一个对象,包含 Vue 的全局配置. 源码位置:util/config.js 搜索config 可以找到其源码地址,其中声明了config的类型和默认参数 下 ...

  7. NIO开发Http服务器(3):核心配置和Request封装

    最近学习了Java NIO技术,觉得不能再去写一些Hello World的学习demo了,而且也不想再像学习IO时那样编写一个控制台(或者带界面)聊天室.我们是做WEB开发的,整天围着tomcat.n ...

  8. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  9. HTML5 开发APP( 环境配置)

    上一篇我写了关于新建项目,这一篇说一下配置环境我们新建一个移动app后,会发现一个mainifest.json文件,开发app所要配置的环境就在这个文件里 点击打开文件后会有配置界面,在配置界面的下方 ...

随机推荐

  1. hashlib和hmac模块

    目录 一.hashlib模块 1.0.1 hash是什么 1.0.2 撞库破解hash算法加密 一.hashlib模块 1.0.1 hash是什么 hash是一种算法(Python3.版本里使用has ...

  2. iOS:从头捋一遍VC的生命周期

    一.介绍 UIViewController是iOS开发中的核心控件,没有它那基本上任何功能都无法实现,虽然系统已经做了所有控件的生命维护,但是,了解它的生命周期是如何管理还是非常有必要的.网上有很多教 ...

  3. 【nginx启动报错】重启服务器之后nginx启动错

    错误信息: # ./nginx  nginx: [emerg] open() "/var/run/nginx/nginx.pid" failed (2: No such file ...

  4. vscode开发微信小程序使用less(插件Easy WXLESS)

    1.搜索按照Easy WXLESS 2.在文件中加入下面的一行代码:就会在同级目录下同步代码到.wss // out: index.wxss 更多的写法可以查官网:https://marketplac ...

  5. SLB外部端口非80时---》转发到nginx---》URL跳转丢失端口的解决方案

    配置nginx反向代理时遇到一个问题,当设置nginx监听80端口时转发请求没有问题.但一旦设置为监听其他端口,就一直跳转不正常: 如,访问欢迎页面时应该是重定向到登录页面,在这个重定向的过程中端口丢 ...

  6. PHP JWT token实现

      原文链接:https://www.jb51.net/article/146790.htm   机制:   代码如下:   <?php /**  * PHP实现jwt  */ class Jw ...

  7. 使用码云,GitHub进行版本控制,并通过WebHook进行自动部署

    我们通常需要在 PUSH 代码到远程仓库时,线上环境会自动进行代码同步,这时候就需要用到WebHook,它会自动回调我们设定的http地址. 通过请求我们自已编写的脚本,来拉取代码,实现与远程仓库代码 ...

  8. php捕获Fatal error错误与异常处理

    php中的错误和异常是两个不同的概念. 错误:是因为脚本的问题,比如少写了分号,调用未定义的函数,除0,等一些编译语法错误. 异常:是因为业务逻辑和流程,不符合预期情况,比如验证请求参数,不通过就用 ...

  9. Knative 实战:一个微服务应用的部署

    作者 | 元毅 阿里云智能事业群高级开发工程师 在 Istio 中提供了一个 Bookinfo 的示例,用于演示微服务之间的调用,那么如何在 Knative 中部署这个示例呢?本文将会给大家介绍一下在 ...

  10. Nginx 极简教程(快速入门)

    作者:dunwu github.com/dunwu/nginx-tutorial 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4.  ...