uniapp 数据网络请求封装以及通用使用

缺乏、安全感 2021-09-19 13:48 675阅读 0赞

# index.js #

import http from './interface'
    
    /**
     * 将业务所有接口统一起来便于维护
     * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
     * 
     */
    
    // 单独导出(测试接口) import {test} from '@/common/vmeitime-http/'
    export const test = (data) => {
    	/* http.config.baseUrl = "http://localhost:8080/api/"
    	//设置请求前拦截器
    	http.interceptor.request = (config) => {
    		config.header = {
    			"token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    		}
    	} */
    	//设置请求结束后拦截器
    	http.interceptor.response = (response) => {
    		console.log('个性化response....')
    		//判断返回状态 执行相应操作
    		return response;
    	}
        return http.request({
    		baseUrl: 'https://unidemo.dcloud.net.cn/',
            url: 'ajax/echo/text?name=uni-app',
    		dataType: 'text',
            data,
        })
    }
    
    // 轮播图
    export const banner = (data) => {
        return http.request({
            url: '/banner/36kr',
            method: 'GET', 
            data,
    		// handle:true
        })
    }
    
    // 默认全部导出  import api from '@/common/vmeitime-http/'
    export default {
    	test,
        banner
    }

# interface.js #

export default {
    	config: {
    		baseUrl: "https:",
    		header: {
    			'Content-Type':'application/json;charset=UTF-8',
    			'Content-Type':'application/x-www-form-urlencoded'
    		},  
    		data: {},
    		method: "GET",
    		dataType: "json",  /* 如设为json，会对返回的数据做一次 JSON.parse */
    		responseType: "text",
    		success() {},
    		fail() {},
    		complete() {}
    	},
    	interceptor: {
    		request: null,
    		response: null
    	},
    	request(options) {
    		if (!options) {
    			options = {}
    		}
    		options.baseUrl = options.baseUrl || this.config.baseUrl
    		options.dataType = options.dataType || this.config.dataType
    		options.url = options.baseUrl + options.url
    		options.data = options.data || {}
    		options.method = options.method || this.config.method
    		//TODO 加密数据
    		
    		//TODO 数据签名
    		/* 
    		_token = {'token': getStorage(STOREKEY_LOGIN).token || 'undefined'},
    		_sign = {'sign': sign(JSON.stringify(options.data))}
    		options.header = Object.assign({}, options.header, _token,_sign) 
    		*/
    	   
    		return new Promise((resolve, reject) => {
    			let _config = null
    			
    			options.complete = (response) => {
    				let statusCode = response.statusCode
    				response.config = _config
    				if (process.env.NODE_ENV === 'development') {
    					if (statusCode === 200) {
    						console.log("【" + _config.requestId + "】 结果：" + JSON.stringify(response.data))
    					}
    				}
    				if (this.interceptor.response) {
    					let newResponse = this.interceptor.response(response)
    					if (newResponse) {
    						response = newResponse
    					}
    				}
    				// 统一的响应日志记录
    				_reslog(response)
    				if (statusCode === 200) { //成功
    					resolve(response);
    				} else {
    					reject(response)
    				}
    			}
    
    			_config = Object.assign({}, this.config, options)
    			_config.requestId = new Date().getTime()
    
    			if (this.interceptor.request) {
    				this.interceptor.request(_config)
    			}
    			
    			// 统一的请求日志记录
    			_reqlog(_config)
    
    			if (process.env.NODE_ENV === 'development') {
    				console.log("【" + _config.requestId + "】 地址：" + _config.url)
    				if (_config.data) {
    					console.log("【" + _config.requestId + "】 参数：" + JSON.stringify(_config.data))
    				}
    			}
    
    			uni.request(_config);
    		});
    	},
    	get(url, data, options) {
    		if (!options) {
    			options = {}
    		}
    		options.url = url
    		options.data = data
    		options.method = 'GET'  
    		return this.request(options)
    	},
    	post(url, data, options) {
    		if (!options) {
    			options = {}
    		}
    		options.url = url
    		options.data = data
    		options.method = 'POST'
    		return this.request(options)
    	},
    	put(url, data, options) {
    		if (!options) {
    			options = {}
    		}
    		options.url = url
    		options.data = data
    		options.method = 'PUT'
    		return this.request(options)
    	},
    	delete(url, data, options) {
    		if (!options) {
    			options = {}
    		}
    		options.url = url
    		options.data = data
    		options.method = 'DELETE'
    		return this.request(options)
    	}
    }
    
    
    /**
     * 请求接口日志记录
     */
    function _reqlog(req) {
    	if (process.env.NODE_ENV === 'development') {
    		console.log("【" + req.requestId + "】 地址：" + req.url)
    		if (req.data) {
    			console.log("【" + req.requestId + "】 请求参数：" + JSON.stringify(req.data))
    		}
    	}
    	//TODO 调接口异步写入日志数据库
    }
    
    /**
     * 响应接口日志记录
     */
    function _reslog(res) {
    	let _statusCode = res.statusCode;
    	if (process.env.NODE_ENV === 'development') {
    		console.log("【" + res.config.requestId + "】 地址：" + res.config.url)
    		if (res.config.data) {
    			console.log("【" + res.config.requestId + "】 请求参数：" + JSON.stringify(res.config.data))
    		}
    		console.log("【" + res.config.requestId + "】 响应结果：" + JSON.stringify(res))
    	}
    	//TODO 除了接口服务错误外，其他日志调接口异步写入日志数据库
    	switch(_statusCode){
    		case 200:
    			break;
    		case 401:
    			break;
    		case 404:
    			break;
    		default:
    			break;
    	}
    }