位置: IT常识 - 正文

记录转载：uni-app 请求 uni.request封装使用(uni appp)

编辑：rootadmin

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。先在目录下创建 utils 和 common 这2个文件夹 utils 是存放工具类的，common 用来放置常用方法的之后在utils 中创 ... 这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

推荐整理分享记录转载：uni-app 请求 uni.request封装使用(uni appp)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uni'app,uni-app入门到实战,uni-app官网,uni'app,uni-app navigateto,uni'app,uni-app入门到实战,uni-app官网,内容如对您有帮助，希望把文章链接给更多的朋友！

对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。

先在目录下创建 utils 和 common 这2个文件夹

记录转载：uni-app 请求 uni.request封装使用(uni appp)

utils 是存放工具类的，common 用来放置常用方法的

之后在utils 中创建 requset.js 用来放置 uni.request 的请求方法，在对其进行简单的封装。

requset.js 代码import operate from '../common/operate.js'// vuex 的使用详情参考官网 https://uniapp.dcloud.io/vue-vueximport store from '../store/index.js'export default class Request {http(param) {// 请求参数var url = param.url,method = param.method,header = {},data = param.data || {},token = param.token || "",hideLoading = param.hideLoading || false;//拼接完整请求地址var requestUrl = operate.api + url;//拼接完整请求地址（根据环境切换）// var requestUrl = operate.api() + url;//请求方式:GET或POST(POST需配置// header: {'content-type' : "application/x-www-form-urlencoded"},)if (method) {method = method.toUpperCase(); //小写改为大写if (method == "POST") {header = {'content-type': "application/x-www-form-urlencoded"};} else {header = {'content-type': "application/json"};}}//加载圈if (!hideLoading) {uni.showLoading({title: '加载中...'});}// 返回promisereturn new Promise((resolve, reject) => {// 请求uni.request({url: requestUrl,data: data,method: method,header: header,success: (res) => {// 判断请求api 格式是否正确if (res.statusCode && res.statusCode != 200) {uni.showToast({title: "api错误" + res.errMsg,icon: 'none'});return;}// 将结果抛出resolve(res.data)},//请求失败fail: (e) => {uni.showToast({title: "" + e.data.msg,icon: 'none'});resolve(e.data);},//请求完成complete() {//隐藏加载if (!hideLoading) {uni.hideLoading();}resolve();return;}})})}}

在common 中分别创建 operate.js 和 api.js

operate.js 用来放置请求接口 api 地址export default {//接口api: "http://192.168.208.126:8080",}根据小程序环境切换接口地址export default {//接口api: function() {let version = wx.getAccountInfoSync().miniProgram.envVersion;switch (version) {case "develop": //开发预览版return "https://www.baidu.com/"break;case 'trial': //体验版return "https://www.baidu.com/"break;case 'release': //正式版return "https://www.baidu.com/"break;default: //未知,默认调用正式版return "http://www.baidu.com/"break;}}使用方法一（全局请求）

在跟目录创建api文件夹：在创建api.js

api.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 api.js中请求即可

import Request from '@/utils/requset.js'let request = new Request().http//全局定义请求头export default {// 请求样式classifyLeft: function(data) {return request({url: "/category/list", //请求头method: "GET", //请求方式data: data, //请求数据})},}/*请求样式：自定义名字: function(data) {return request({url: "/banner", //请求头method: "GET", //请求方式data: data, //请求数据token: token, // 可传hideLoading: false, //加载样式})},*/

api.js的调用可以在main.js 中进行全局调用，也可以在需要的页面中调用，可根据实际情况来决定是否全局调用。下面只介绍全局调用

在mian.js中导入api.js1. 在main.js 中引入api.jsimport api from '@/common/api.js'Vue.prototype.$api = api2. 在页面中调用//不传参数this.$api.sendRequest().then((res) => {console.log(res);})//传参this.$api.sendRequest({参数}).then((res) => {console.log(res);})使用方法二（页面单独引入）

user.js 是用来调用我们封装好的 uni.request ,并且统一管理请求接口，在后续开发中只需要在页面中调用 user.js中请求即可

import Request from '@/utils/requset.js'import operate from '@/common/operate.js'let request = new Request().http// 按需引入的请求头export const getUserInfo= function(data) {return request({url: "order/user ",method: "POST",data: data,token: operate.isToken()})}页面中使用//引入import {getUserInfo} from '@/api/user.js'//放入生命周期init() {//用户信息getUserInfo().then((res) => {console.log(res);})},

本文转载于:https://juejin.cn/post/7023983465892675614如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。