【无标题】

uni-app封装公共请求

第一种方法 main.js中使用Vue.prototype

根目录新建文件夹util,然后新建request.js

request.js
export function myRequest(options){
	return new Promise((resolve,reject)=>{
	(之前已经获取了token,并缓存)
		uni.getStorage({
			key:'token',
			success: (res) => {
				const token = res.data
				uni.request({
					url: "https://XXXXXXXX/" + options.url + "?token=" + token,
					method: options.method || 'GET',
					data: options.data || {},
					success: (res) => {
						resolve(res.data)
					},
					fail: (err) => {
						reject(res)
					}
				})
			}
		})
	})
}

然后在main.js引入

import { myRequest } from '@/util/request.js'
Vue.prototype.$myRequest = myRequest

在页面中使用

onLoad() {
	this.$myRequest({
		url:''//（有就写，没有就不写）
	}).then((res)=>{
		console.log(res)
	})
}

第二种方法，使用store

根目录新建store文件夹，新建index.js

store/index.js内容如下

import { createStore } from 'vuex'
// import App from '@/App.vue'
// 创建一个新的 store 实例
const store = createStore({
	state () {
		return {
		  count: 0
		}
	},
	actions:{
		myRequest ({commit},options) {
			return new Promise((resolve,reject) => {
				uni.getStorage({
					key: 'token',
					success: (res) => {
						const token = res.data
						uni.request({
							url: "https://XXXXXXXX.com/" + options.url + "?token=" + token,
							method: options.method || 'GET',
							data: options.data || {},
							success: (res) => {
								resolve(res.data)
							},
							fail: (err) => {
								console.log(res)
							}
						})
					}
				})
				
			})
		}
	}
})

export default store

main.js内容如下

import App from './App'
import store from './store'
// #ifndef VUE3
import Vue from 'vue'
import Vuex from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store,
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  return {
    app
  }
}
// #endif

页面中使用

	import { mapActions	} from 'vuex'
	onLoad() {
		this.myRequest({
			url: ''
		}).then((res)=>{
			this.indexData = res
			console.log(res)
		})
	},
	methods: {
		...mapActions(['myRequest'])
	}