uni-app(二)接口请求封装,全局输出api
- 在项目 main.js 同级创建 utils 文件夹,
- utils里创建 config.js文件,存储重要参数
// 获取平台信息
const {
system,
} = uni.getSystemInfoSync() // 请求服务器环境,xxx 在这里是填充,请自行替换
let baseUrl = ['http://xxx', 'https://xxx'] // 小程序重要参数
uni.config = {
platform: system.startsWith("iOS") ? 2 : 1, // IOS为2 安卓为1
imgUrl: "https://xxx", // 图片地址前缀
baseUrl: baseUrl[1],
appid: "xxx", // appid
} - utils里创建request.js文件,封装接口请求
// 登录接口域名
const LOGIN_URL = '/xx/xx'
const {
baseUrl,
appid
} = uni.config // 封装接口请求
uni.http = (args = {}) => {
let url = args.url || ''
let data = args.data || {}
data.appid = appid
let method = args.method || 'GET'
return new Promise((resolve, reject) => {
request(url, data, method, resolve, reject)
})
} // 接口封装
const request = async (url, data = {}, method, resolve, reject) => {
let token = await getToken()
let header = {
'content-type': 'application/x-www-form-urlencoded',
'token': token
}
uni.request({
header,
url: baseUrl + url,
method,
data,
dataType: 'json',
success: res => {
if (res.statusCode == 200) {
let code = res.data.return
if (code == 0) {
resolve(res.data)
} else {
uni.showModal({
title: '错误码:' + code,
content: res.data.result
})
}
}
},
fail: err => {
reject(err)
}
})
} // 获取Token
const getToken = async () => {
let token = uni.getStorageSync('token')
if (token) {
return token
} else {
let tokenRes = await login()
return tokenRes.data.token
}
} // 封装登录
const login = () => {
return new Promise((resolve, reject) => {
uni.getProvider({
service: "oauth",
success(providerRes) {
let provider = providerRes.provider[0]
uni.login({
provider,
success: (codeRes) => {
uni.request({
url: baseUrl + LOGIN_URL,
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
appid
},
data: {
code: codeRes.code
},
dataType: 'json',
success: (res) => {
if (res && res.statusCode == 200) {
// 存储用户信息
uni.setStorageSync('status', res.data.data)
// 存储用户token
uni.setStorageSync('token', res.data.token)
resolve(res.data)
} else {
reject(res)
}
},
fail: (err) => {
reject(err)
}
})
},
fail: (err) => {
reject(err)
}
})
}
})
})
} - utils里创建 api.js文件,整理页面需要的请求,输出api
// 这里举个例子,实际结合自己使用场景
// 获取列表
let getList = function(data) {
return await uni.http({
url: "/xxx/xxx",
data,
method: "POST"
})
} // 全局输出
uni.service = {
getList
} - main.js 引入文件
// 顺序引入,负责参数会访问不到 import '@/utils/config'
import '@/utils/request'
import '@/utils/api' - 使用
methods: {
async getList() {
let obj = {
// 参数
}
let res = await uni.service.getList(obj)
if (res.return == 0) {
// 成功操作
}
}
}好了,你学废了吗,下期整理 uni-app 的其他内容,期待你的带来
uni-app(二)接口请求封装,全局输出api的更多相关文章
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- 微信小程序HTTP接口请求封装
1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装)request.js: var app = getApp(); //项目URL相同部分,减轻代码量, ...
- MOOC(7)- case依赖、读取json配置文件进行多个接口请求-封装mock(9)
封装mock # -*- coding: utf-8 -*- # @Time : 2020/2/12 8:51 # @File : mock_demo_9.py # @Author: Hero Liu ...
- app登录接口请求报:“签名验证失败”???已解决
根据抓包数据获得url.param.header,在charles中compose请求结果为成功,在pycharm中运行则报:“签名验证失败”. 运行结果:
- 简单的基于Vue-axios请求封装
具体实现思路=>封装之前需要用npm安装并引入axios,使用一个单独的js模块作为接口请输出对象,然后export dafult 这个对象. 1.首先我们需要在Vue实例的原型prototyp ...
- uni-app 环境配置,uni.request封装,接口配置,全局配置,接口调用的封装
1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV ...
- 【uni-app】uni.request二次封装,更好的管理api接口和使用
前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然, ...
- Flutter 实际开发常用工具类(全局提示,请求封装,token缓存,验证码倒计时、常用窗帘动画及布局)
介绍: 一星期从入门到实际开发经验分享及总结 代码传送门github Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.未来App开发 ...
- python自动化--接口请求及封装
基于http协议,最常用的是GET和POST两种方法. 接口文档需要包含哪些信息: 接口名称接口功能接口地址支持格式 json/xml请求方式请求示例请求参数(是否必填.数据类型.传递参数格式)返回参 ...
随机推荐
- RSA 加密解密使用实例
http://www.dtmao.cc/news_show_692109.shtml 本文不讨论RSA加密解密本身,只记录使用方法及遇到的坑,RSA原理及注意事项可在网上查找. 背景:公司的一个需求, ...
- java 提供了哪些IO方式
今天听了杨晓峰老师的java 36讲,感觉IO这块是特别欠缺的,所以讲义摘录如下: 欢迎大家去订阅: 本文章转自:https://time.geekbang.org/column/article/83 ...
- SpringSecurity认证流程
SpringSecurity配置 SecurityConfig.java @Override protected void configure(HttpSecurity http) throws Ex ...
- HEXO版本控制与持续集成
主要解决了hexo发布文章的繁琐,以及本地资源丢失,更换电脑等情况的出现. 采用AppVeyor实现. 转自 https://formulahendry.github.io/2016/12/04/he ...
- PicGo:搭建图床
PicGo:搭建图床 PicGo 免费搭建个人图床工具PicGo: 支持Windows.MacOS 和 Linux 软件目前覆盖的图床有8个平台: SM.MS图床.腾讯云COS.GitHub图床.七牛 ...
- SSL 数据加密原理简述
最近调试mqtt协议,为了保证数据安全性和将来客户端的对云的兼容性选择了openssl作为安全加密中间层,而没有使用私有的加密方式.所以花了点时间学习了一下ssl 加密流程整理如下: 因为正常正式使用 ...
- Pycharm+任务栏悬浮+docked mode
先点下所想改变模式的模块, 然后: Window -> Activate tool window -> docked mode.
- codepen 上25个最受欢迎的HTML/CSS代码
Codepen是一个非常了不起的网站,优设哥在设计师网址导航上也大力推荐过,得到了很多同学的喜爱,也是全球web前端开发人员的圣地! 我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS ...
- MongoDB 101
MongoDB 101 Studio 3T https://studio3t.com/academy/ https://studio3t.com/academy/lessons/introducing ...
- codesign wants to access key 密码是什么
codesign wants to access key 密码是什么 真正的是开机密码,不是 apple id 密码 https://developer.apple.com/forums/thread ...