二次封装request请求

utils/showTips.js二次封装uni.showToast

export const $showMsg = (title='请求数据失败', duration=1500, icon) => {uni.showToast({title: title,duration: duration,icon: icon})
}

utils/storage.js二次封装StorageSync

/* 可以存储任意类型的值,可以存数组 */
const storage = {getItemSync (key) { /* 取的时候storage.getItem('键') */const value = uni.getStorageSync(key)const obj = value ? JSON.parse(value) : []if (obj.value) {return obj.value}return null},setItemSync (key, value) {const obj = {value}uni.setStorageSync(key, JSON.stringify(obj)) /* 存的时候'键', 数组名 */},removeItemSync (key) {uni.removeStorageSync(key)},clearSync () {uni.clearStorageSync()}
}
export default storage

局部使用storage

utils/request.js二次封装uni.request

import storage from './storage'
const BASE_URL = 'http://127.0.0.1:3000'export const request = (url, method, params) => {return new Promise((resolve, reject) => {uni.request({url: BASE_URL + url, // 地址method: method || 'get', // 请求方式header: { token: storage.getItemSync('user') ? storage.getItemSync('user').token : '' }, // tokendata: params || {}, // 参数success: (res) => {const data = res.dataif(data.code === '401') {uni.navigateTo({ url: '/pages/login/login' })return} else if(data.code !== 200) {this.$showMsg('操作错误', '1500', 'error')}// 成功将data抛出resolve(data)},// ... 这里还可以做一些请求完成之后的提示，我就不做了fail: (err) => {this.$showMsg('系统错误', '1500', 'error')reject(err)}})})
}

全局挂载

import App from './App'// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'// 引入提示消息
import { showTips } from '@/utils/showTips'
Vue.prototype.$showMsg = showTips// 引入request请求
import { request } from '@/utils/request'
Vue.prototype.$api = requestVue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif

如何使用

 使用request-miniprogram插件的形式来完成uniapp请求

1. 安装插件：npm install @escook/request-miniprogram
2. 在main.js中导入下载好的request包

// #ifndef VUE3
import Vue from 'vue'
import App from './App'
// 引入包
import { $http } from '@escook/request-miniprogram';
import { $showMsg } from './utils/showTips.js';// 引入vuex
import store from '@/store/index.js'// 挂载包
uni.$http = $http// 请求根路径
$http.baseUrl = 'https://www.uinav.com'// 请求开始之前做一些事情
$http.beforeRequest = function (options) {uni.showLoading({title: "数据加载中..."})// 判断当前请求是否为有权限的接口，因为只有登录之后才能用支付相关的接口if(options.url.indexOf('/token/') !== -1) {// 如果有权限的话就给options的header添加Authorization的字段，值为tokenoptions.header = {Authorization: store.state.m_user.token // 直接读取vuex中的token赋值给Authorization}}
} // 请求完成之后做一些事情
$http.afterRequest = function () {uni.hideLoading() // 返回数据之后隐藏动画
}
const app = new Vue({...App,store
})Vue.config.productionTip = false
Vue.prototype.$showMsg = $showMsg;App.mpType = 'app'app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！