uniapp 封装API axios二次封装步骤

1.新建api文件夹

 2.api中新建base.js,代码如下

let baseURL = '';
// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用
let showHttpLog = false;
baseURL = 'http://192.168.20.167:8081';  // 测试环境 
// baseURL = 'http://115.238.111.11:38003'; //  正式环境
module.exports = {
	baseURL: baseURL,
	showHttpLog: showHttpLog
}

 3.api中新建http.js,代码如下

import {
	baseURL
} from './base.js'; //导入接口的前缀地址

export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		// 开始请求 出现Loading
		uni.showLoading({
			title: '加载中...'
		});
		uni.request({
			url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数:传入的参数或者默认传递空集合 
			header: {
				authorization: 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息 
			},
			success: (res) => {
				//返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败)
				if (res.data.code != 200) {
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				}
				// 请求成功关闭Loading
				uni.hideLoading();
				// 如果不满足上述判断就输出数据
				resolve(res)
			},
			// 这里的接口请求,如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log(err)
				uni.showToast({
					title: '获取失败',
					icon: 'none'
				})
				reject(err)
			}
		})
	})
}

  3.api中新建all.js,存放接口,代码如下

import {
	myRequest
} from './http.js'

//登录
export function login(config) {
	return myRequest({
		url: '/smtj/login',
		method: 'post',
		data: config
	})
}

//首页查询扫码数  +  获取饼形图数据 
export function getData(config) {
	return myRequest({
		url: '/smtj/sm/analysis/' + config,
		method: 'get',
		data: config
	})
}

// 首页日扫码趋势折线图
export function getAnalysisTrend(time1, time2) {
	return myRequest({
		url: `/smtj/sm/analysisTrend?startDay=${time1}&endDay=${time2}`,
		method: 'get',
	})
}

// 首页村 场所码统计数据
export function analyze(data) {
	return myRequest({
		url: `/smtj/sm/village/analysis?gridName=${data}`,
		method: 'get',
		data: data
	})
}

// 获取 小区下拉
export function pointName() {
	return myRequest({
		url: `/smtj/place-info/grid`,
		method: 'get',
	})
}
// 村场所码统计table内容
export function analyze2(data) {
	return myRequest({
		url: `/smtj/sm/village/analysis?type=village&gridName=${data}`,
		method: 'get',
		data: data
	})
}

// 获取村社扫码趋势下拉
export function getType(config) {
	return myRequest({
		url: '/smtj/sm/type?pageSize=9999&pageNum=1',
		method: 'post',
		data: config
	})
}

// 折线图2数据
export function getPlaceData(date, time1, time2, type) {
	return myRequest({
		url: `/smtj/sm/place/analysis?startDay=${time1}&endDay=${time2}&type=${type}`,
		method: 'post',
		data: date
	})
}

// 企业下拉
export function communityList(prarms) {
	return myRequest({
		url: `/smtj/place-info/community`,
		method: 'get',
		data: prarms,
	})
}

//条件查询
export const conditionalQuery = prarms => {
	return myRequest({
		url: `/smtj/place-info/list`,
		method: "post",
		data: prarms,
	});
};


// 导出为excel 下载文件
export const exportInfos = prarms => {
	return myRequest({
		url: `/smtj/place-info/download`,
		method: "post",
		responseType: 'blob',
		data: prarms,
	});
};

// 获取列表 
export const getcommunityList = prarms => {
	return myRequest({
		url: `/smtj/place-info/residence`,
		method: "get",
		data: prarms,
	});
};

 4.页面调用,先引用,再调用

	import {
		getData,
		getAnalysisTrend,
		analyze,
		analyze2,
		getType,
		pointName,
		getPlaceData
	} from '@/api/all.js';


			getPlaceData().then(res => {
					console.log('返回', res)
				} else {
					// console.log(res.msg);
				}
			})

你可能感兴趣的:(前端,uni-app,前端,javascript)