uniapp封装方法

参考：https://www.cnblogs.com/gqx-html/p/10967570.html
根据报错和实际情况作了一些修改
1.环境配置
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 == 验证码登录 *///当项目没有vuex时是正确的，当我在项目中配置vuex后，就报错找不到state,才发现是源码这里报错。如果你也报这个错，把下面这个switch 注释掉就可以了switch (power){case 1:headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='break;case 2:headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='break;case 3:responseType = 'blob'break;default:headers['Authorization'] = `Bearer ${this.$store.getters.userInfo}`headers['TENANT-ID'] = this.$store.getters.userInfo.tenant_idbreak;}return uni.request({url: urlConfig + url,method,data: data,dataType: 'json',header: headers}).then(res => {if (res[1].data.status && res[1].data.code == 200) {return res[1]} else {throw res[1].data}}).catch(parmas => {switch (parmas.code) {case 401:uni.clearStorageSync()breakdefault: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'
// 请求方式
//用户登录获得code
api.login = params => request.globalRequest(`/getCode`, 'GET', params);//GET,POST必须大写
export default api

4. 新建common/util.js

/*** 拼接对象为请求字符串* 对于需要编码的文本（比如说中文）我们要进行编码* @param {Object} obj - 待拼接的对象* @returns {string} - 拼接成的请求字符串**/
export function formatGetUri(obj) {const params = []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 = urlApp.mpType = 'app'const app = new Vue({...App,store
})app.$mount()

6.接口调用

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

7.注意：这里参考别人的文章，我复制之后，遇到文件根据实际情况做了一些修改，当项目没有vuex时是正确的，当我在项目中配置vuex后，就报错找不到state,才发现是源码这里报错。如果你也报这个错，把request.js中的switch 注释掉就可以了

uniapp封装方法相关推荐

uni-app封装缓存过期方法
uni-app封装缓存过期方法缓存在我们的日常开发中还是非常常见的.同样的今天的话题是在uni-app框架中怎么封装一个缓存方法,为什么还要自己封装缓存方法?虽然说uni-app是用缓存的api接口 ...
浅析 uniapp(Vue) 的接口封装方法
浅析 uniapp(Vue) 的接口封装方法本文将详细讲解封装思路,通过对接口请求进行封装,实现接口引入即用,减少了请求复杂的属性参数,更加关注数据与业务本身. config - 请求地址及相关参数 ...
Android uni-app 封装原生插件
前言据广大用户的需求,需要把我们anyRTC的SDK,封装到uni-app来使用,并且实现音视频通话.这边文章图文讲解一下怎么封装原生插件,并且在下一章uni-app实现音视频通话. anyRTC开 ...
uniapp02 封装方法，页面跳转，页面的生命周期，@click，@input，v-model、封装组件、tabbar
一,封装方法默认导出 export default 1. 如果是默认导出只能使用一次 export default 2. 如果你想导出多个可以使用按需导出 export 3 ...
js面向对象的封装方法，【案例】
封装方法: /*** @矩形canvas库* @authors Shimily (275766400@qq.com)* @date 2016-12-28 10:30:51* @version $Id$ ...
python封装方法有几种_python之--------封装
一.封装: 补充封装: 封装: 体现在两点:1.数据的封装(将数据封装到对象中) obj= Foo('宝宝',22)2.封装方法和属性,将一类操作封装到一个类中classFoo:def __init_ ...
MP实战系列(十一)之封装方法详解(续一)
之前写的封装方法详解,比较简要. 今天我主要讲增加和删除及其修改.查的话得单独再详讲. 增删改查,无论是Java或者C#等等,凡是对数据库操作的都离不开这四个. 一.增加方法讲解 MyBatis Pl ...
多层陶瓷电容器用处_【科普】片状多层陶瓷电容器的封装方法，你了解吗？
随着以片状多层陶瓷电容器为首的电子元器件的快速小型化发展,尺寸也进行了如下变化: size (EIA) 3216(1206)→2012(0805)→1608(0603)→1005(0402)→0603 ...
js 数组移除_JS某些封装方法
js中的一些封装方法 1.首先var一个数组然后创建一个函数,在函数里var一个新的空数组,利用for循环,在for循环里var一个下标 i=形参的长度-1 设置i>=0 i--. 在for循 ...

uniapp封装方法

uniapp封装方法

uniapp封装方法相关推荐

最新文章

热门文章