好的免费网站建站平台,重庆建设集团官方网站,潮阳网站制作,上海松江区做网站公司目录 1. 基本知识2. Demo3. 拓展 1. 基本知识
从实战代码中学习#xff0c;上述实战代码来源#xff1a;芋道源码/yudao-mall-uniapp 该代码中#xff0c;通过自定义 request 函数对 HTTP 请求进行了统一管理#xff0c;并且结合了 Token 认证机制
请求封装原理#xff… 目录 1. 基本知识2. Demo3. 拓展 1. 基本知识
从实战代码中学习上述实战代码来源芋道源码/yudao-mall-uniapp 该代码中通过自定义 request 函数对 HTTP 请求进行了统一管理并且结合了 Token 认证机制
请求封装原理request 函数是对 uni.request 的一个封装
动态设置请求头根据 config 的配置决定是否需要在请求头中附加 AuthorizationBearer Token。Token 是从本地存储中获取的根据环境区分不同的 Base URL根据当前的开发环境development 或 production动态设置请求的基础 URLbaseUrl统一处理请求参数config.params 会被转化成查询字符串拼接到请求的 URL 后面Promise 封装异步操作请求通过 uni.request 发出并将返回的 response 数据封装为一个 Promise使得调用 request 的地方可以使用 then 或 catch 来处理结果
Token 认证管理原理
Token 存储uni.setStorageSync 和 uni.getStorageSync 被用来在客户端本地存储 ACCESS_TOKEN 和 REFRESH_TOKEN这两个 Token 被用于身份验证获取 Token在每次 HTTP 请求时首先会检查请求是否需要 Token通过 config.headers.isToken 判断。如果需要就从本地存储中获取 AccessToken 并加入到请求头中Token 过期处理当请求返回的状态码为 401 时表示 Token 已过期此时会弹出提示框让用户重新登录并清除旧的 Token
错误处理机制
网络错误封装了常见的网络错误如超时、服务器错误等并提供了友好的提示接口返回错误统一处理接口返回的错误错误信息根据 res.data.code 的值来决定如果返回的是 500 错误或其他非 200 的错误则通过 toast 提示给用户401 错误处理当返回状态码为 401 时表示 Token 过期或无效代码会自动处理登出流程
2. Demo
根据实战中的Demo给出一版通用的Demo
封装request的时候需要与token结合
// utils/request.js
import { getAccessToken, setToken, removeToken } from /utils/auth;
import config from /config;
import errorCode from /utils/errorCode;
import { toast, showConfirm } from /utils/common;let timeout 10000;
let baseUrl process.env.NODE_ENV development ? config.devbaseUrl : config.prodbaseUrl;const request config {const isToken (config.headers || {}).isToken false;config.header config.header || {};if (getAccessToken() !isToken) {config.header[Authorization] Bearer getAccessToken();}config.header[tenant-id] 1; // 强制设置租户 IDif (config.params) {let url config.url ? tansParams(config.params);url url.slice(0, -1);config.url url;}return new Promise((resolve, reject) {uni.request({method: config.method || get,timeout: config.timeout || timeout,url: config.baseUrl || baseUrl config.url,data: config.data,header: config.header,dataType: json}).then(response {let [error, res] response;if (error) {toast(后端接口连接异常);reject(后端接口连接异常);return;}const code res.data.code || 200;const msg errorCode[code] || res.data.msg || errorCode[default];if (code 401) {showConfirm(登录状态已过期您可以继续留在该页面或者重新登录?).then(res {if (res.confirm) {removeToken();uni.reLaunch({ url: /pages/login });}});reject(无效的会话或者会话已过期请重新登录。);} else if (code 500) {toast(msg);reject(500);} else if (code ! 200) {toast(msg);reject(code);}resolve(res.data);}).catch(error {let { message } error;if (message Network Error) message 后端接口连接异常;else if (message.includes(timeout)) message 系统接口请求超时;else if (message.includes(Request failed with status code)) message 系统接口 message.substr(message.length - 3) 异常;toast(message);reject(error);});});
};export default request;对应的token文件
// utils/auth.js
const AccessTokenKey ACCESS_TOKEN;
const RefreshTokenKey REFRESH_TOKEN;export function getAccessToken() {return uni.getStorageSync(AccessTokenKey);
}export function getRefreshToken() {return uni.getStorageSync(RefreshTokenKey);
}export function setToken(token) {uni.setStorageSync(AccessTokenKey, token.accessToken);uni.setStorageSync(RefreshTokenKey, token.refreshToken);
}export function removeToken() {uni.removeStorageSync(AccessTokenKey);uni.removeStorageSync(RefreshTokenKey);
}相关接口请求
// 在页面中调用封装的请求方法
import request from /utils/request;export default {methods: {fetchData() {request({url: /api/getData,method: GET,params: { id: 123 }}).then(response {console.log(数据:, response);}).catch(error {console.log(请求失败:, error);});}}
}3. 拓展
process.env.NODE_ENV 是 Node.js 环境中用于获取当前应用运行环境的一个变量
在大多数前端框架如 Vue、React以及后端框架如 Express中process.env.NODE_ENV 被广泛用于区分不同的开发环境
前端vue中可能已经标明了 在开发模式下NODE_ENVdevelopment npm run dev 在生产模式下NODE_ENVproduction npm run build 在 npm 脚本中可以通过 cross-env 等工具来跨平台设置环境变量
scripts: {dev: cross-env NODE_ENVdevelopment vue-cli-service serve,build: cross-env NODE_ENVproduction vue-cli-service build
}另外一个接口超时时间全局默认是20秒如果时长不对可以在单独某个接口设置
// 上传图片
uploadImage(data) {return upload({url: /infra/file/upload,method: upload,filePath: data.filePath,timeout: 30000 // 设置超时时间为30秒});
}
