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

红太狼 2022-12-12 04:59 128阅读 0赞

**适用于：**

1.  小程序
2.  app
3.  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]])