uni-app 基于Promise封装uni-app的request方法，类似vue中axios形式的请求封装

之前写Vue项目时，感觉用request封装拦截超级简单，到uni-app的时候，惊喜的发现有uni-request，感觉狠爽第一步：安装 uni-requestnpm install uni-request --save第二步：main.js引入import uniRequest from ‘uni-request’;第三步：（全局引入，因人而异，可以选择跳过第三步）Vue.prototype.

pxhing

1708人浏览 · 2020-10-06 17:41:17

pxhing · 2020-10-06 17:41:17 发布

适用于：

小程序
app
H5

安装 uni-request

npm install uni-request --save

封装 uni-request (utils => request.js)

import uniRequest from 'uni-request';


uniRequest.defaults.baseURL = process.env.NODE_ENV == 'development' ? 'XXXXXX' :
	'XXXXXX'  //接口根据环境自己写
uniRequest.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
uniRequest.defaults.headers['token'] = uni.getStorageSync('token') || ''
uniRequest.defaults.headers.post['Content-Type'] = 'application/json';

uniRequest.interceptors.response.use(res => {
	if (typeof res.data !== 'object') {
		uni.showModal({
			title: '服务器端异常',
		});
		return Promise.reject(res)
	}
	if (res.data.code == 999) {
		uni.reLaunch({
			url: '/pages/login/login'
		});
	}
	if (res.data.code != 100) {
		if (res.data.message) {
			uni.showModal({
				title: res.data.message,
			});
		}
		return Promise.reject(res.data)
	}
	return res.data
})


export default uniRequest

接口文件（server=> home.js）

import requset from '../utils/request.js'

export function getHome() {
  return requset.post('/merber/index');
}

页面使用

<template>
	<view class="content">
		<button type="default" @click="test">测试接口</button>
	</view>
</template>

<script>
	import {
		getHome
	} from "../../server/home.js";
	export default {
		methods: {
			async test() {
				const data = await getHome();
				console.log(data);
			},
		}
	}
</script>

完工！

提供的请求方法（可自己封装）

uniRequest.request(config)
uniRequest.get(url[, config])
uniRequest.delete(url[, config])
uniRequest.head(url[, config])
uniRequest.options(url[, config])
uniRequest.post(url[, data[, config]])
uniRequest.put(url[, data[, config]])
uniRequest.patch(url[, data[, config]])