uniapp简单请求封装

目录

1.utils/request.js

//把配置项单独处理
import store from './store/index.js'; //vuex  
let server_url = 'http://192.168.xx.xx:8080'; //请求地址
let token = ' ';
// 凭证
process.env.NODE_ENV === 'development' ? '192.168.0.1' : 'http://***/api'; //环境配置
function service(options = {}) {
	store.state.token && (token = store.state.token); //从vuex中获取登录凭证
	options.url = `${server_url}${options.url}`;
	options.method = options.method;
	//配置请求头
	options.header = {
		'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
		// 'accessToken': `${token}` //Bearer 
	};
	return new Promise((resolved, rejected) => {
		//成功
		options.success = (res) => {

			if (Number(res.data.code) == 200) { //请求成功
				resolved(res.data);
			} else {
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: `${res.errMsg}`
				});
				rejected(res.errMsg); //错误
			}
		}
		//错误
		options.fail = (err) => {
			rejected(err); //错误
		}
		uni.request(options);
	});
}
export default service;

2.utils/store/index.js

//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({ //全局变量定义
	state: {
		forcedLogin: false, //是否需要强制登录
		hasLogin: false,
		userName: "",
		userId: '',
		token: '',
		pointId: '',
	},
	mutations: {
		login(state, user) {
			state.userName = user.username || '';
			state.hasLogin = true;
			state.userId = user.id || '';
			state.token = user.token || '';
		},
		logout(state) {
			state.userName = "";
			state.hasLogin = false;
			state.userId = '';
			state.token = '';
		}
	}
})
export default store

3.api/common.js

import request from "@/utils/request";

// 通过溯源二维码码扫码获取商品信息 
export function getProductTraceInfoByCode(traceCode) {
	return request({
		url: '/rpc/common/info/getProductTraceInfoByCode/' + traceCode,
		method: 'GET'
	})
}

4.页面使用

<script>
	import {
		getProductTraceInfoByCode
	} from '@/api/common.js'
	export default {
		data() {
			return {
				traceCode: null
			}
		},
		onLoad(options) {
			this.traceCode = options.traceCode||'66'
		},
		onShow(){
			this.getProductTraceInfoByCode()
		},
		methods: {
			getProductTraceInfoByCode() {
				getProductTraceInfoByCode(this.traceCode).then(res=>{
				})
			}
		}
	}
</script>