随笔集：简单实现接口下发

简单实现接口下发

在开发的时候我们可能会碰到域名多但又可能会进行频繁改动和切换的时候，可能会出现改错或者漏改的时候，这个时候如果能让后端去控制的话，可以避免一些风险。

在api文件夹内创建api_config.js配置文件，简要内容如下

import httpConfig from './config.js'
import store from '@/store/index.js'

export default {
	config: {
		header: {},
		method: '',
		responseType: "text",
		withCredentials: false,
		data: {},
		success() {},
		fail() {},
		complete() {},
		requestRemoteIp: () => {
			return new Promise((resolve, reject) => {
				let apiArr = []
				uni.request({
					url: '获取下发接口的请求地址' + Math.random().toString(36),
					method: 'GET',
					data: {},
					header:{
						'env' : 'prod',
					},
					success: (res) => {
						store.commit('updateUrl', res.data.data)
						apiArr = JSON.stringify(res.data.data)
						uni.setStorageSync('apiArr', apiArr)
						resolve(res)
					},
					fail: () => {
						resolve()
					}
				})
			});
		}
	},
	interceptor: {
		request: null,
		response: null
	},
	async request(method, url, params, config) {
		this.config.method = method
		if (store.state.urlConfig && store.state.urlConfig[config.baseUrl]) {
			this.config.url = store.state.urlConfig[config.baseUrl] + url
		} else {
			let remoteIP = await this.config.requestRemoteIp(); // 动态设置接口请求域名
			this.config.url = store.state.urlConfig[config.baseUrl] + url
		}
		//省略代码...
	},
	
	POST(url, params = {}, config = {}) {
		return this.request('POST', url, params, config)
	},

	GET(url, params = {}, config = {}) {
		return this.request('GET', url, params, config)
	},  
	sendUrl: {
		...httpConfig
	}
}

在api文件夹内创建接口文件index.js，简要内容如下

import request from "../api_config.js"

export default {
	// 更新wgt
	getUpdateUrl: (params) => request.POST('/xxx/xxx/xxx', params, {baseUrl: 'baseApi'}),
}

在每次调用接口的时候都会走到request方法内，先判断当前调用的接口域名在vuex内是否存在，如果不存在则请求接口获取然后把获取到的域名组和当前请求的域名进行匹配替换

这里有一个优化点，如果请求接口的域名在请求的域名组里面不存在会造成重复请求，可以在请求参数里加一个当前请求的域名名称，没有的时候后端自动添加进去一个空的。