ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

uni项目中封装api请求

2022-03-08 11:32:50  阅读：168  来源： 互联网

标签：封装 url options return method api uni config response


我创建了一个hello，uni的模板项目，在此模板上进行api的封装
1.建立相关文件
image

具体代码如下：
env.js,主要用来区分不同环境的访问路径，此处包含开发环境与生产环境

// .env.js 文件
// 不同环境访问不同的路径
// import store from '@/common/store/index'

//登录接口
const ENV_LOGIN_URL = {
	development: '/boc', //开发环境
	production: 'http://47.99.240.74:9898', //生产环境
}

//项目接口
const ENV_API_URL = {
	development: '/boc', //开发环境
	production: 'http://47.99.240.74:9898', //生产环境
}

//图片上传
const IMG_UPLOAD_URL = 'http://cdn.nccnt.com/';

//高德地图
const GAODE_URL = 'https://restapi.amap.com/';

// process.env.NODE_ENV
export const LOGIN_URL = ENV_LOGIN_URL['development']; //后台根域名
export const API_URL = ENV_API_URL['development']; //后台接口域名
export const MAP_URL = GAODE_URL; //地图接口
export const IMG_URL = IMG_UPLOAD_URL; //图片上传接口

request.js

import {
	API_URL
} from '@/env'
export default class Request {
	config = {
		baseUrl: API_URL,
		header: {
			'content-type': 'application/json',
			'platform': uni.getStorageSync('platform'),
		},
		method: 'GET',
		dataType: 'json',
		// #ifndef MP-ALIPAY || APP-PLUS
		responseType: 'text',
		// #endif
		custom: {},
		// #ifdef MP-ALIPAY
		timeout: 30000,
		// #endif
		// #ifdef APP-PLUS
		sslVerify: false
		// #endif
	}

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

	static addQueryString(params) {
		let paramsData = ''
		Object.keys(params).forEach(function(key) {
			paramsData += key + '=' + encodeURIComponent(params[key]) + '&'
		})
		return paramsData.substring(0, paramsData.length - 1)
	}

	/**
	 * @property {Function} request 请求拦截器
	 * @property {Function} response 响应拦截器
	 * @type {{request: Request.interceptor.request, response: Request.interceptor.response}}
	 */
	interceptor = {
		/**
		 * @param {Request~requestCallback} cb - 请求之前拦截,接收一个函数（config, cancel）=> {return config}。第一个参数为全局config,第二个参数为函数，调用则取消本次请求。
		 */
		request: (cb) => {
			if (cb) {
				this.requestBeforeFun = cb
			}
		},
		/**
		 * @param {Request~responseCallback} cb 响应拦截器，对响应数据做点什么
		 * @param {Request~responseErrCallback} ecb 响应拦截器，对响应错误做点什么
		 */
		response: (cb, ecb) => {
			if (cb && ecb) {
				this.requestComFun = cb
				this.requestComFail = ecb
			}
		}
	}

	requestBeforeFun(config) {
		return config
	}

	requestComFun(response) {
		return response
	}

	requestComFail(response) {
		return response
	}

	/**
	 * 自定义验证器，如果返回true 则进入响应拦截器的响应成功函数(resolve)，否则进入响应拦截器的响应错误函数(reject)
	 * @param { Number } statusCode - 请求响应体statusCode（只读）
	 * @return { Boolean } 如果为true,则 resolve, 否则 reject
	 */
	validateStatus(statusCode) {
		return statusCode === 200
	}

	/**
	 * @Function
	 * @param {Request~setConfigCallback} f - 设置全局默认配置
	 */
	setConfig(f) {
		this.config = f(this.config)
	}

	/**
	 * @Function
	 * @param {Object} options - 请求配置项
	 * @prop {String} options.url - 请求路径
	 * @prop {Object} options.data - 请求参数
	 * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
	 * @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
	 * @prop {Object} [options.header = config.header] - 请求header
	 * @prop {Object} [options.method = config.method] - 请求方法
	 * @returns {Promise<unknown>}
	 */
	async request(options = {}) {
		options.baseUrl = this.config.baseUrl
		options.dataType = options.dataType || this.config.dataType
		// #ifndef MP-ALIPAY || APP-PLUS
		options.responseType = options.responseType || this.config.responseType
		// #endif
		// #ifdef MP-ALIPAY
		options.timeout = options.timeout || this.config.timeout
		// #endif
		options.url = options.url || ''
		options.data = options.data || {}
		options.params = options.params || {}
		options.header = options.header || this.config.header
		options.method = options.method || this.config.method
		options.custom = {
			...this.config.custom,
			...(options.custom || {})
		}
		// #ifdef APP-PLUS
		options.sslVerify = options.sslVerify === undefined ? this.config.sslVerify : options.sslVerify
		// #endif
		// uni.showToast({
		// 	icon: "loading",
		// 	image: "/static/imgs//logo/logo.gif"
		// })
		return new Promise((resolve, reject) => {
			let next = true
			let handleRe = {}

			options.complete = (response) => {
				response.config = handleRe
				if (this.validateStatus(response.statusCode)) { // 成功
					response = this.requestComFun(response)
					resolve(response.data)
				} else if (401 === response.statusCode) {
					response = this.requestComFun(response)
					resolve(response.data)
				} else if (500 === response.statusCode) {
					resolve(response.data)
				} else {
					response = this.requestComFail(response)
					reject(response)
				}
			}
			const cancel = (t = 'handle cancel', config = options) => {
				const err = {
					errMsg: t,
					config: config
				}
				reject(err)
				next = false
			}

			handleRe = {
				...this.requestBeforeFun(options, cancel)
			}
			const _config = {
				...handleRe
			}
			if (!next) return
			delete _config.custom
			let mergeUrl = Request.posUrl(_config.url) ? _config.url : (_config.baseUrl + _config.url)
			if (JSON.stringify(_config.params) !== '{}') {
				const paramsH = Request.addQueryString(_config.params);
				mergeUrl += mergeUrl.indexOf('?') === -1 ? `?${paramsH}` : `&${paramsH}`
			}
			_config.url = mergeUrl
			uni.request(_config)
		})
	}

	get(url, options = {}) {
		return this.request({
			url,
			method: 'GET',
			...options
		})
	}

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

	upload(url, {
		// #ifdef APP-PLUS
		files,
		// #endif
		// #ifdef MP-ALIPAY
		fileType,
		// #endif
		filePath,
		name,
		header,
		formData,
		custom
	}) {
		return new Promise((resolve, reject) => {
			let next = true
			let handleRe = {}
			const globalHeader = {
				...this.config.header
			}
			delete globalHeader['content-type']
			const pubConfig = {
				baseUrl: this.config.baseUrl,
				url,
				// #ifdef APP-PLUS
				files,
				// #endif
				// #ifdef MP-ALIPAY
				fileType,
				// #endif
				filePath,
				method: 'UPLOAD',
				name,
				header: header || globalHeader,
				formData,
				custom: {
					...this.config.custom,
					...(custom || {})
				},
				complete: (response) => {
					response.config = handleRe
					if (response.statusCode === 200) { // 成功
						response = this.requestComFun(response)
						resolve(response)
					} else {
						response = this.requestComFail(response)
						reject(response)
					}
				}
			}
			const cancel = (t = 'handle cancel', config = pubConfig) => {
				const err = {
					errMsg: t,
					config: config
				}
				reject(err)
				next = false
			}

			handleRe = {
				...this.requestBeforeFun(pubConfig, cancel)
			}
			const _config = {
				...handleRe
			}
			if (!next) return
			delete _config.custom
			_config.url = Request.posUrl(_config.url) ? _config.url : (_config.baseUrl + _config.url)
			uni.uploadFile(_config)
		})
	}
}

/**
 * setConfig回调
 * @return {Object} - 返回操作后的config
 * @callback Request~setConfigCallback
 * @param {Object} config - 全局默认config
 */
/**
 * 请求拦截器回调
 * @return {Object} - 返回操作后的config
 * @callback Request~requestCallback
 * @param {Object} config - 全局config
 * @param {Function} [cancel] - 取消请求钩子，调用会取消本次请求
 */
/**
 * 响应拦截器回调
 * @return {Object} - 返回操作后的response
 * @callback Request~responseCallback
 * @param {Object} response - 请求结果 response
 */
/**
 * 响应错误拦截器回调
 * @return {Object} - 返回操作后的response
 * @callback Request~responseErrCallback
 * @param {Object} response - 请求结果 response
 */

index.js,调用request发起请求，配置一些请求发起前后的一些操作，或者进行token拦截之类的。

import Request from './request'
import apiList from './api'
// import store from '@/common/store/index.js'

export default function api(url, data = {}) {
	const request = new Request();
	let api = getApiObj(url);

	// request.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
	//        let tokenFlag = store.getters.loginFlag;
	// 	if (api.auth && !tokenFlag) {
	//            store.commit('OUT_LOGIN');
	//            console.log('暂未登录,已阻止此次API请求~');
	//            throw('暂未登录,已阻止此次API请求~');
	// 	}
	// 	if (tokenFlag) {
	//            //tokenInfo.access_token即为登录token
	// 		config.header.token = store.state.tokenInfo.access_token;
	// 	}
	// 	return config
	// });

	// request.interceptor.response((response) => {
	// 	/* 请求之后拦截器 */
	// 	if (response.data.code === 401) { // 服务端返回的状态码不等于200，则reject()
	// 		//401代表token失效
	// 		store.commit('OUT_LOGIN');
	// 	}

	// 	if (response.data.code != 200) { // 服务端返回的状态码不等于200，则reject()
	// 		uni.showToast({
	// 			title: response.data.msg || '请求出错,稍后重试',
	// 			icon: 'none',
	// 			duration: 2000,
	// 			mask: true
	// 		});
	// 	}


	// 	// if (response.config.custom.verification) { // 演示自定义参数的作用
	// 	//   return response.data
	// 	// }
	// 	return response
	// }, (response) => { // 预留可以日志上报
	// 	return response
	// })

	return request.request({
		url: api.url,
		data,
		method: api.method
	})

}

function getApiObj(url) {
	let apiArray = url.split(".");
	let api = apiList;
	apiArray.forEach(v => {
		api = api[v];
	});
	return api;
}

api.js,所有项目中使用到的接口，放到这里进行统一管理

/**
 * 接口列表文件
 * auth代表接口是否需要token
 */
export default {
	// 登录接口，测试proxy
	login: {
		url: '/phone/bind',
		// 是否需要token拦截
		auth: false,
		method: 'POST'
	},
	/** 获取天气 **/
	test: {
		url: 'api?version=v9&appid=23035354&appsecret=8YvlPNrz',
		auth: false,
		method: 'GET',
		// desc: '初始化数据',
	},

	/** 初始化 ↓ **/
	init: {
		url: 'index/init',
		auth: false,
		method: 'GET',
		// desc: '初始化数据',
	},

	/** 上传Base64图片 ↓ **/
	uploadBase64: {
		url: 'index/uploadBase64',
		auth: false,
		method: 'POST',
		// desc: '上传Base64位图片',
	},

	/** 用户 ↓ **/
	user: {
		info: {
			url: 'user',
			auth: true,
			method: 'GET',
			// desc: '用户信息',
		},

		profile: {
			url: 'user/profile',
			auth: true,
			method: 'POST',
			// desc: '修改用户信息',
		},

		changeMobile: {
			url: 'user/changemobile',
			auth: true,
			method: 'POST',
			// desc: '修改手机号',
		},

	},

	/** 短信 ↓ **/
	sms: {
		send: {
			url: '/boc/phone/send',
			auth: false,
			method: 'GET',
			// desc: '发送短信',
		},
	},

};

2.设置代理，解决跨域问题（前后端同源的话无需设置）
参考：https://webpack.docschina.org/configuration/dev-server/#devserverproxy
image
此文件根下面添加：

	"h5": {
		// 开发环境serve配置
		"devServer": {
			// 禁用host检查
			"disableHostCheck": true,
			// 代理转发，参考：https://webpack.docschina.org/configuration/dev-server/#devserverproxy
			"proxy": {
				// /boc/phone/bind 会请求到 http://47.99.240.74:9898/boc/phone/bind
				"/boc": {
					"target": "http://47.99.240.74:9898",
					// 代理不保留主机源头(允许跨域)
					"changeOrigin": true,
					// 接受在 HTTPS 上运行且证书无效的后端服务器
					"secure": false
					// 是否需要重写/boc，此处不需要
					// "pathRewrite": {
					// 	"^/boc": ""
					// }
				}
			}
		}
	},

3.挂载全局实例
main.js

import api from '@/api/index.js'
Vue.prototype.$api = api;

4.使用，以login为例

		login() {
				this.$api('login', {
					name: '',
					openId: '',
					phone: '12345678'
				}).then((res) => {
					console.log(res)
				})
			}

标签：封装,url,options,return,method,api,uni,config,response
来源： https://www.cnblogs.com/gracexin/p/15979669.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有