get request uni 参数_uni-app 环境配置,uni.request封装,接口配置,全局配置,接口调用的封装...

本文介绍了uni-app的环境配置,包括开发和生产环境的URL设置。接着展示了如何封装uni.request,包括不同权限的接口调用处理。此外,还详细讲解了接口配置、利用util.js处理GET请求参数,并在main.js中进行全局配置,使得在组件中能便捷调用接口。最后给出了接口调用示例及推荐的封装案例。
摘要由CSDN通过智能技术生成

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

common文件夹下新建config.js

let url_config = ""

if(process.env.NODE_ENV === 'development'){//开发环境

url_config = 'https://*****.com/'}else{//生产环境

url_config = 'https://*****.com/'}

exportdefault 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 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;

}returnuni.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()

break

default:

uni.showToast({

title: parmas.message,

icon: 'none'

})

return Promise.reject()

break

}

})

}

exportdefault 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, 1)

// GET请求方式api.register = params => request.globalRequest(`${PORT1}/mobile/signUp${formatGetUri(params)}`, 'GET //必须大写,为了兼容其他应用',{}, 1)

exportdefault 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 Appfrom './App'import storefrom './store' // 与vue项目中配置相同,可自行配置import requestfrom './common/request.js'import apifrom './api/index.js'import urlfrom './common/config.js'Vue.config.productionTip= falseVue.prototype.$request=request

Vue.prototype.$api=api

Vue.prototype.$url=url

App.mpType= 'app'

const app = newVue({

...App,

store

})

app.$mount()

5.接口调用

this.$api.register({mobile: this.mobile}).then(res =>{//获得数据

console.log(res)

}).catch(res => {

// 失败进行的操作})

6.推荐

在uni-app扩展组件中找到了一个封装的案例,大家如果觉得可以的话,可试用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值