调接口获取数据
方法1
//HTML
<template>
<view>{{spot.info}}</view>
</template>
//JS
<script>
import { apiName } from '../../api/app.js'; //引入接口
export default {
data() {
return {
spot:null, //预留个位置接受接口接收到的数据鸭~
};
},
//页面加载时就调用接口啦
onLoad() {
this.apiName (); //预约详情页传来的预约id
},
methods: {
async apiName (){
let data = {
//需要传参的话
//参数名:参数
//params:param1
}
//整个const来接受data鸭~
const {data: newName} = await apiName(data); //接口传来的数据叫data, 给它取个新名字newName,可以省略嗷
//然后将newName的数据丢到之前在data里挖好的坑位spot~ 然后html那里就可以用spot里的数据啦
this.spot = newName;
}
}
};
</script>
方法2 (头头说这是笨方法 >.<)
//HTML
<template>
<view>{{info}}</view>
</template>
//JS
<script>
import { apiName } from '../../api/app.js'; //引入接口
export default {
data() {
return {
info:"", //预留个位置接受接口接收到的数据鸭~
};
},
//页面加载时就调用接口啦
onLoad() {
this.apiName (); //预约详情页传来的预约id
},
methods: {
async apiName (){
let data = {
//需要传参的话
//参数名:参数
//params:param1
}
//整个const来接受data鸭~
const newName = await apiName(data);
//现在就接受到data啦,在常量newName里。如果我想要newName里的info数据,只需要
this.info= newName.info;//这样html那里就可以直接用info了~
}
}
};
</script>
app.js 接口管理
const http = require("../utils/request")
// 获取类型查询
export async function functionName (data) {
return await http.request({
url: "api/url/goes/here",
data: {
...data
}
})
}
request.js
// http.js
const conf = require("../config");
// const crypt = require('./crypt');
// 等待队列集合
let subscribers = [];
// 是否正在获取 token, 初始化时全部请求加入队列
let isRefreshing = true;
// 本次会话 token 和 key
let session_token = uni.getStorageSync("session_token");
let session_key = uni.getStorageSync("session_key");
let errtime = 0;
// 微信平台
// 初始化检查微信登录状态
(async function() {
try {
// 检查登录态是否过期
if(!session_key) {
refreshToken()
}else {
await wx.checkSession()
}
//真机下可能不会出发过期手动进行判断
if (session_token == "" || !session_token) {
await refreshToken();
}
// 检查周期性更新是否设置登录凭证
// await wx.getBackgroundFetchToken();
} catch (error) {
console.error("登录状态已过期,开始重新获取");
// 清除本地缓存 token
cleanToken()
// 刷新 token
await refreshToken();
} finally {
isRefreshing = false;
// 释放队列
releaseSubscriber();
}
})();
function cleanToken() {
uni.removeStorageSync("session_token");
uni.removeStorageSync("session_key");
}
// 鉴权成功后释放等待队列进行重新请求
function releaseSubscriber() {
subscribers.forEach((process) => process());
// 清空等待队列
subscribers = [];
}
// 加入等待队列
function pushSubscriber(process) {
subscribers.push(process);
}
// 请求获取 token
function getToken(code) {
return new Promise((resolve, reject) => {
// 常规请求
uni.request({
method: "POST",
header: {
ver: "1.0.0"
},
data: {
code: code
},
url: `${conf.proxy["/mp"].target}/singin`,
success: (result) => resolve(result.data),
fail: (error) => resolve(error)
});
});
}
// 刷新 token
async function refreshToken() {
// 保险上锁
isRefreshing = true;
// 获取 code
const lo = await uni.login({
scopes: 'auth_base'
});
// 使用 code 获取 token 和 key
const {
token,
key,
message
} = await getToken(lo[1].code);
// 获取凭据失败终止处理
if (!token || !key) {
if (errtime > 2) {
uni.showModal({
title: "出错啦",
content: `错误信息:${message}`,
showCancel: false,
confirmText: "关闭"
});
}
cleanToken()
return
};
// 会话缓存 token 和 key
session_token = token;
session_key = key;
// 本地缓存 token
uni.setStorageSync("session_token", token);
uni.setStorageSync("session_key", key);
// #ifdef MP-WEIXIN
// 设置周期性更新所使用的 token
uni.setBackgroundFetchToken({
token
});
// #endif
// 保险释放锁
isRefreshing = false;
}
// 接口请求成功回调
async function request_success(options, resolve, reject, result) {
try {
// 响应状态码
const code = result.data?.errcode;
if (code == 401) {
// 响应为鉴权失败错误时,进入刷新 token 等待
isRefreshing = true;
cleanToken()
// 正在获取 token 时,将期间的所有请求加入等待队列
pushSubscriber(() =>
// 传入当前请求参数及回调函数
request({
__resolve: resolve,
__reject: reject,
...options
})
);
//判断超时次数 只能发送3次
if (errtime > 2) {
request_fail(options, resolve, reject, result)
return
}
errtime = errtime + 1;
// 获取 token
await refreshToken();
isRefreshing = false;
// 释放队列
releaseSubscriber();
} else if (code) {
// 自定义错误回调
if (typeof options.fail == "function") options.fail(result.data);
// 响应为其他错误时,进行队列抛出或常规抛出
return options.__resolve ? options.__resolve(result.data) : resolve(result.data);
} else {
//重新设置超时次数为0次
errtime = 0;
// 自定义成功回调
if (typeof options.success == "function") options.success(result);
//判断是否加密
let re = result.data.encryptData ? JSON.parse(crypt.decrypt(result.data.encryptData, uni.getStorageSync(
"session_key"))) : result.data
re.errcode = result.data.errcode
// 响应成功时,进行队列回调或常规回调
return options.__resolve ?
options.__resolve(re) :
resolve(re);
}
} catch (error) {
reject({
resultMessage: error.message,
resultCode: 1
});
}
};
// 接口请求失败回调
function request_fail(options, resolve, reject, error) {
console.error({
msg: '失败回调',
...error,
...options
});
uni.showModal({
title: "出错啦",
content: `网络故障,请稍后重试`,
showCancel: false,
confirmText: "关闭"
});
const err = {
resultCode: 1,
resultMessage: error.message
};
options.__reject ?
options.__reject(err) :
reject(err);
};
// 接口请求
function request(options = {}) {
return new Promise((resolve, reject) => {
// 如果存在请求体,则必须为 Object 类型
if (options.data && typeof options.data != "object") {
reject({
resultCode: 1,
resultMessage: "请求体必须为 Object 类型"
});
return;
}
// 自动对请求体中的 encryptData[object] 字段进行加密
// 非 object 类型不进行加密,避免队列释放后二次加密
if (options.data?.encryptData &&
typeof options.data?.encryptData == "object" &&
session_key) {
options.data.encryptData = crypt.encrypt(
JSON.stringify(options.data?.encryptData),
session_key
);
}
if (isRefreshing) {
// 正在获取 token 时,将期间的所有请求直接加入等待队列
pushSubscriber(() =>
// 传入当前请求参数及回调函数
request({
__resolve: resolve,
__reject: reject,
...options
})
);
} else {
if (options.loading == true || options.loading == undefined) {
uni.showLoading({
title: "加载中"
})
}
// 常规请求
uni.request({
method: "POST",
...options,
header: {
...options.header,
tk: session_token || uni.getStorageSync("session_token"),
ver: '1.0.0'
},
url: `${conf.proxy["/mp"].target}${options.url}`,
success: (result) => {
// 默认有网络加载动画 动画延迟默认500
if (options.loading == true || options.loading == undefined) {
if (!options.loadTime) options.loadTime = 500
setTimeout(() => {
uni.hideLoading()
}, options.loadTime)
}
// 如果服务器异常
if (result.statusCode != 200) {
request_fail(options, resolve, reject, result)
return
}
// 如果数据异常
if(result.data.errcode!=0 && result.data.errcode!=401) {
uni.showModal({
title: "出错啦",
content: result.data.message,
showCancel: false,
confirmText: "关闭",
...result.data
});
}
request_success(options, resolve, reject, result)
},
fail: (error) => {
if (options.loading == true || options.loading == undefined) {
if (!options.loadTime) options.loadTime = 500
setTimeout(() => {
uni.hideLoading()
}, options.loadTime)
}
request_fail(options, resolve, reject, error)
}
});
}
});
};
module.exports.request = request;