uni-app封装 uni.request请求及设置请求拦截

uni-app封装 uni.request请求及设置请求拦截

在pages文件同级下创建service目录，在此文件架里创建 index.js 和 request.js 文件和api文件夹

先设置请求拦截验证

index.js里的全部代码：

import Vue from 'vue'
import Request from './request.js'
const http = new Request();
// 此方法在request.js里用于更改基础请求路径
// console.log(http.setConfig()) 
http.setConfig((config) => {
	// console.log(config)
	var url=""
	// console.log(process.env.NODE_ENV)
	if(process.env.NODE_ENV === 'development'){
		url = '';
	}else{
		url = '';
	}
	config.baseUrl = url
	return config
})

http.interceptor.request((config, cancel) => {
	/* 请求之前拦截器 */
	uni.showLoading({
		title: "请稍后...",
		mask: true
	})
	var _token = uni.getStorageSync('setUserToken'); // 从本地缓存中同步获取指定 key 对应的内容。
	if (_token) {
		var token = {};
		if (typeof _token === 'string') {
			token = JSON.parse(_token);
		} else {
			token = _token;
		}
		if (token) {
			config.header.Authorization = token.token_type + ' ' + token.auth_token;
		}
	}
	return config;
})
http.interceptor.response(
	(response) => {
		/* 请求之后拦截器 */
		uni.hideLoading(); //关闭加载动画
		console.log(response);
		if (!response || response.statusCode == 401) {
			uni.clearStorage();
			uni.reLaunch({
				url: '/pages_package_login/login/login.vue',
			});
			return false;
		} 
		if (!response || response.statusCode == 404) {
			// console.log('123');
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '接口不存在'
			});
		} 
		else if (response.errMsg && response.errMsg == 'request:fail') {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '网络连接失败'
			});
		} else {
			if (response.statusCode == 200 && response.data.statusCode == 200) {
				return response.data.data;
			} else {
				if (!response.data) {
					uni.reLaunch({
						url: '/pages_package_login/login/login.vue',
					});
				} else if (response.data.statusCode == 402) {
					uni.showModal({
						title: '提示',
						content: response.data.msg,
						showCancel: false
					});
				} else if (response.data.statusCode == 409) {
					uni.showModal({
						title: '提示',
						content: response.data.msg,
						showCancel: false
					});
				} else if (response.data.statusCode == 400) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '非法操作'
					});
				} else {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '系统错误'
					});
				}
			}
		}
	
	})
export {
	http
};

request.js 里的全部代码:

export default class Request {
	config = {
		baseUrl: '',
		header: {
			'Content-Type': 'application/json;charset=UTF-8'
		},
		method: 'GET',
		dataType: 'json',
		responseType: 'text',
		success() {},
		fail() {},
		complete() {}
	}

	static posUrl(url) { /* 判断url是否为绝对路径 */
		return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
	}

	interceptor = {
		request(f) {
			if (f) {
				Request.requestBeforeFun = f
			}
		},
		response(f) {
			if (f) {
				Request.requestComFun = f
			}
		}
	}

	static requestBeforeFun(config) {
		return config
	}

	static requestComFun(response) {
		return response
	}
	// 更改基础请求路径
	setConfig(f) {
		// console.log(f)
		// console.log(this.config)
		this.config = f(this.config)
	}

	request(options = {}) {
		options.baseUrl = options.baseUrl || this.config.baseUrl
		options.dataType = options.dataType || this.config.dataType
		options.url = Request.posUrl(options.url) ? options.url : (options.baseUrl + options.url)
		options.data = options.data || {}
		options.header = options.header || this.config.header
		options.method = options.method || this.config.method
		return new Promise((resolve, reject) => {
			let next = true
			let _config = null
			options.complete = (response) => {
				let statusCode = response.statusCode
				response.config = _config
				response = Request.requestComFun(response)
				if (statusCode === 200) { // 成功
					resolve(response)
				} else {
					if (response)
						reject(response)
					else
						reject(null);
				}
			}
			let cancel = (t = 'handle cancel') => {
				let err = {
					errMsg: t,
					config: afC
				}
				reject(err)
				next = false
			}
			let afC = { ...this.config,
				...options
			}
			_config = { ...afC,
				...Request.requestBeforeFun(afC, cancel)
			}
			if (!next) return
			uni.request(_config)
		})
	}
	
	// 设置 get 和 post 请求 需要url请求地址 data所需参数 
	get(url, data, options = {}) {
		options.url = url
		options.data = data
		options.method = 'GET'
		// 使用 this.request 发起请求，传入参数，获取数据
		return this.request(options)
	}

	post(url, data, options = {}) {
		options.url = url
		options.data = data
		options.method = 'POST'
		return this.request(options)
	}
}

封装api请求函数， 以了登录请求函数为例
在 api 文件夹里创建login.js

login里的全部代码:

/**
 * 首页api
 */
import {http} from '../index.js'


/**
 * 登录
 * @returns {Promise}
 */
export function getLogin(data){
	let config = {}
	let e = http.post("users/login",data,config);
    return e
}

然后在 main.js 引入挂载
main.js 里的全部代码：

import App from './App'
import Vue from 'vue'

import {http} from './service/index.js'
Vue.prototype.$http = http

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

在页面中的应用：

import { getLogin } from '../../service/api/login.js'


getLogin('12345679812').then((res) => {
	console.log(res)
})