uniapp 接口封装

luch-request与uni.request比较

luch-request

https://github.com/lei-mu/luch-request

luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。

支持全局挂载

1. 支持多个全局配置实例
2. 支持自定义验证器
3. 支持文件上传/下载
4. 支持task 操作
5. 支持自定义参数
6. 支持多拦截器
7. 对参数的处理比uni.request 更强

方法一： luch-request 

安装依赖 // uview使用的封装接口

npm install luch-request -S

@/config/request.js

import Request from 'luch-request'
import { baseUrl } from './index.js'
const http = new Request()
/* config 为默认全局配置*/
http.setConfig((config) => {
	config.baseURL = baseUrl /* 根域名不同 */
	config.header = {
		...config.header,
	}
	return config
})

/* 在请求之前拦截 */
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
	uni.showLoading({
		mask: true
	})
	// console.log('在请求之前拦截', config);
	config.header = {
		...config.header
	}
	return config
})

/* 在请求之后拦截 */
http.interceptors.response.use((response) => {
	uni.hideLoading()
	// console.log('在请求之后拦截', response);
	const status = response.statusCode
	if(status === 200){
		if(response.data.code === 200){
			return response.data
		}else if(response.data.code === 401){
			uni.showToast({
			     icon: 'none',
			     title: '认证失败!'
			});
			return Promise.reject('认证失败!');
		}else if(response.data.code === 500){
			uni.showToast({
			     icon: 'none',
			     title: '服务器内部错误!'
			});
			return Promise.reject('服务器内部错误!');
		}else{
			uni.showToast({
			     icon: 'none',
			     title: response.data.msg || '请求错误!',
			});
			return Promise.reject(response.data.msg || '请求错误!');
		}
	}else {
		uni.showToast({
		     icon: 'none',
		     title: '未知错误!',
		});
		return Promise.reject("未知错误!");
	}
}, (response) => {
	uni.hideLoading()
	// console.log('响应错误', response)
	const status = response.statusCode
	/*  对响应错误做点什么 （statusCode !== 200）*/
	const title = response.data ? (response.data.msg ? response.data.msg : "网络异常!" ): "网络异常！"
	uni.showToast({
	     icon: 'none',
	     title,
	});
	return Promise.reject(title)
})

export {
	http
}

@api/index.js

import { http } from '@/config/request.js'
 
// 列表
export const getList = (params) => {
	return http.get('/test/list',{ params})
}
// 新增
export const add = (data) => {
	return http.post('/test/add',data)
}
// 删除
export const del = (params) => {
	return http.delete(`/test/del/${params}`)
}

方法二：uni.request

拦截器官网 uni.addInterceptor()

http封装

import {
	urlFormat
} from '@/common/index.js'
// 拦截器配置
const httpInterceptor = {
	// 拦截前触发
	invoke(options) {
		uni.showLoading({
			mask: true
		})
		options.url = urlFormat(options.url)
		options.timeout = 10000
		options.header = {
			...options.header,
		}
		const token = uni.getStorageSync('token')
		if (token) {
			options.header['m-token'] = token
		}
	},
}

// 拦截 request 请求
uni.addInterceptor('request', httpInterceptor)
// 拦截 uploadFile 文件上传
uni.addInterceptor('uploadFile', httpInterceptor)

class Request {
	request(options) {
		return new Promise((resolve, reject) => {
			uni.request({
				...options,
				// 响应成功
				success(response) {
					uni.hideLoading()
					const status = response.statusCode
					if (status === 200) {
						if (response.data.code === 200) {
							resolve(response.data)
						} else if (response.data.code === 401) {
							// 清空缓存
							uni.clearStorageSync()
							//跳转到登录页面
							const index = getCurrentPages().length - 1
							var route = getCurrentPages()[index].$page.fullPath
							uni.reLaunch({
								url: `/pages/login/login?route=${route}`,
							});
							// uni.showToast({
							// 	icon: 'none',
							// 	title: '认证失败!'
							// });
							reject('请重新登录!');
						} else if (response.data.code === 500) {
							uni.showToast({
								icon: 'none',
								title: '服务器内部错误!'
							});
							reject('服务器内部错误!');
						} else {
							uni.showToast({
								icon: 'none',
								title: response.data.msg || '请求错误!',
							});
							reject(response.data.msg || '请求错误!');
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '未知错误!',
						});
						reject("未知错误!")
					}
				},
				// 响应失败
				fail(response) {
					uni.hideLoading()
					// console.log('响应错误', response)
					const status = response.statusCode
					/*  对响应错误做点什么 （statusCode !== 200）*/
					const title = response.data ? (response.data.msg ? response.data.msg :
						"网络异常!") : "网络异常！"
					uni.showToast({
						icon: 'none',
						title,
					});
					reject(title)
				},
			})
		})
	}
	get(url, data) {
		return this.request({
			method: 'GET',
			url,
			data,
		})
	}
	post(url, data) {
		return this.request({
			method: 'POST',
			url,
			data,
		})
	}
	put(url, data) {
		return this.request({
			method: 'PUT',
			url,
			data,
		})
	}
	delete(url, data) {
		return this.request({
			method: 'DELETE',
			url,
			data,
		})
	}
	upload(url, filePath, formData) {
		return new Promise((reslove, reject) => {
			uni.uploadFile({
				url,
				filePath,
				name: 'file', // 必填
				formData,
				// header: {},
				success: (uploadFileRes) => {
					uni.hideLoading()
					reslove(uploadFileRes.data)
				},
				fail: (e) => {
					uni.hideLoading()
					reject(e)
				},
			});
		})
	}
}

const http = new Request()

export default http

使用

import http from '@/http/request.js';

// 获取类别列表
export const test= (data) => {
    return http.get('/api',data)
}