uniapp 接口封装
Posted 奥特曼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 接口封装相关的知识,希望对你有一定的参考价值。
1、一次封装
utils/request.js
export const baseURL = '基地址'
export const request = (options) =>
return new Promise((resolve, reject) =>
uni.request(
url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
data: options.data || , //传递参数:传入的参数或者默认传递空集合
header:
'token': uni.getStorageSync("token") || "" //自定义请求头信息
,
success: (res) =>
console.log(res, uni.getStorageSync('token'));
//返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败)
if (res.data.code == 1)
resolve(res.data.data)
else
if(res.data.code== 401)
uni.navigateTo(
url:'/login/login'
)
uni.clearStorageSync()
reject(res.data.msg)
// 如果不满足上述判断就输出数据
,
// 这里的接口请求,如果出现问题就输出接口请求失败
fail: (err) =>
console.log(err)
reject(err)
)
)
2、二次封装
api/index.js
import
request
from '@/utils/request.js'
// 获取论坛类型 /api/forum/ftype/index
export const getForumType = (page, rows) => request(url: 'forum/ftype/index',method: 'post',data: page,rows)
注意:每一个接口都需要定义一下 ,然后 每次使用时都需要按需引入
3、页面使用
import getUserInfo from '@/api/mine'
methods:
async getUserInfo()
try
const res = await getUserInfo()
this.userInfo = res
console.log('getUserInfo', res)
// 保存数据
catch (err)
uni.showToast( title:err,icon:'none' )
console.log('getUserInfo', err)
,
4. 如果页面使用很麻烦 可以利用代码片段作为快捷键
// 注意:本文档仅支持单行注释,并且'//'前不能有任何非空字符!!!
//
// HBuilderX使用json扩展代码块,兼容vscode的代码块格式
// 本文档修改完毕,保存即可生效,无需重启。
// 本文档用于用户自定义1代码块。
// 每个配置项的说明如下:
// 'key' :代码块显示名称,显示在代码助手列表中的名字,以下例子中'console.log'就是一个key。
// 'prefix' :代码块的触发字符,就是敲什么字母匹配这个代码块。
// 'body' :代码块的内容。内容中有如下特殊格式
// $1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1,如该位置有预置数据,则写法是$1:foo1。多选项即下拉候选列表使用$1:foo1/foo2/foo3
// $2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop)
// $0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。
// 双引号使用\\\\'转义
// 换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔
// 缩进需要用\\\\t表示,不能直接输入缩进!
// 'triggerAssist' :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false。
// 每个代码块以key为主键,多个代码块需要逗号分隔。
// 如果json语法不合法,底部会弹出错误信息,请注意修正。
// 例子:
// "console.log":
// "prefix": "logtwo",
// "body": [
// "console.log('$1');",
// "\\tconsole.log('$2');"
// ],
// "triggerAssist": false,
// "description": "Log output to console twice"
//
"try catch async await":
"prefix": "async", // 快捷键 + tab
"body": [
"async $1()",
"import $2 from '@/api/$4'",
" try ",
" const res = await $2($3)",
" console.log('$2', res)",
" $5// 保存数据",
" catch (err) ",
" uni.showToast( title:err,icon:'none' )",
" console.log('$2', err)",
" ",
","
],
"description": "async await"
以上是关于uniapp 接口封装的主要内容,如果未能解决你的问题,请参考以下文章