18 KiB

Raw Permalink Blame History

request请求、配置简单、批量上传图片、视频、超强适应性（支持多域名请求）

配置简单、源码清晰注释多、适用于一项目多域名请求、第三方请求、七牛云图片上传、本地服务器图片上传等等
支持请求get、post、put、delete
自动显示请求加载动画（可单个接口关闭）
全局api数据处理函数，只回调请求正确的数据（可单个接口关闭）
未登录或登录失效自动拦截并调用登录方法（可单个接口关闭）
全局自动提示接口抛出的错误信息（可单个接口关闭）
支持 Promise
支持拦截器
支持七牛云文件（图片、视频）批量上传
支持本地服务器文件（图片、视频）批量上传
支持上传文件拦截过滤
支持上传文件进度监听
支持上传文件单张成功回调

`QQ交流群(607391225)`	`微信交流群（加我好友备注"进群"）`

QQ群号：607391225	微信号：zhou0612wei

点击跳转-插件示例

点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档

常见问题

1.接口请求成功了，没有返回数据或者数据是走的catch回调

答：requestConfig.js 请求配置文件里面，有一个$http.dataFactory方法，里面写的只是参考示例，此方法需要开发者根据各自的接口返回类型修改

2.官方的方法有数据，本插件方法请求报错跨域问题

答：requestConfig.js 请求配置文件里面，header请求头设置的content-type请求类型需求和后台保持一致

3.登录后用户token怎么设置？

答：requestConfig.js 请求配置文件里面，$http.requestStart请求开始拦截器里面设置

4.怎么判断上传的文件（图片）太大？怎么过滤掉太大的文件（图片）？

答：requestConfig.js 请求配置文件里面，$http.requestStart请求开始拦截器里面设置

5.接口请求成功了，一直提示“网络错误，请检查一下网络”？

答：requestConfig.js 请求配置文件里面，有一个$http.dataFactory方法，里面写的只是参考示例，此方法需要开发者根据各自的接口返回类型修改

本次更新注意事项

所有的headers都改成了header（和官方统一）
七牛云的获取token等信息提取到了requestConfig.js文件，参考如下

// 添加获取七牛云token的方法
$http.getQnToken = function(callback){
	//该地址需要开发者自行配置（每个后台的接口风格都不一样）
	$http.get("api/kemean/aid/qn_upload").then(data => {
		/*
		 *接口返回参数：
		 *visitPrefix:访问文件的域名
		 *token:七牛云上传token
		 *folderPath:上传的文件夹
		 *region: 地区 默认为：SCN
		 */
		callback({
			visitPrefix: data.visitPrefix,
			token: data.token,
			folderPath: data.folderPath,
			region: "SCN"
		});
	});
}

文件说明

request => core 请求方法的目录
request => core => request.js 请求方法的class文件
request => core => utils.js 请求方法的源码文件
request => upload 上传方法的目录
request => upload => upload.js 上传方法的class文件
request => upload => utils.js 上传方法源码文件
request => upload => qiniuUploader.js 七牛云官方上传文件
request => index.js 输出方法的文件
requestConfig.js 请求配置文件（具体看代码）

在main.js引入并挂在Vue上

import $http from '@/zhouWei-request/requestConfig';
Vue.prototype.$http = $http;

`requestConfig.js`配置说明（requestConfig.js有配置示例）

import request from "@/plugins/request";
//可以new多个request来支持多个域名请求
let $http = new request({
	//接口请求地址
	baseUrl: "https://twin-ui.com/", //示例域名，请自行设计
	//服务器本地上传文件地址
	fileUrl: "https://twin-ui.com/", //示例域名，请自行设计
	// 服务器上传图片默认url
	defaultUploadUrl: "api/common/v1/upload_image",
	//设置请求头（如果使用报错跨域问题，可能是content-type请求类型和后台那边设置的不一致）
	header: {
		'Content-Type': 'application/json;charset=UTF-8'
	},
    // 请求超时时间（默认6000）
    timeout: 6000,
    // 默认配置（可不写）
    config: {
        // 是否自动提示错误
        isPrompt: true,
        // 是否显示加载动画
        load: true,
        // 是否使用数据工厂
        isFactory: true,
       // ... 可写更多配置
    }
});

// 添加获取七牛云token的方法
$http.getQnToken = function(callback){
	//该地址需要开发者自行配置（每个后台的接口风格都不一样）
	$http.get("api/common/v1/qn_upload").then(data => {
		/*
		 *接口返回参数：
		 *visitPrefix:访问文件的域名
		 *token:七牛云上传token
		 *folderPath:上传的文件夹
		 *region: 地区 默认为：SCN
		 */
		callback({
			visitPrefix: data.visitPrefix,
			token: data.token,
			folderPath: data.folderPath
		});
	});
}
//当前接口请求数
let requestNum = 0;
//请求开始拦截器
$http.requestStart = function(options) {
    if (options.load) {
    	if (requestNum <= 0) {
            //打开加载动画
            uni.showLoading({
                title: '加载中',
                mask: true
            });
        }
        requestNum += 1;
    }
    // 图片上传大小限制
    if (options.method == "FILE" && options.maxSize) {
    	// 文件最大字节: options.maxSize 可以在调用方法的时候加入参数
    	let maxSize = options.maxSize;
    	for (let item of options.files) {
    		if (item.size > maxSize) {
    			setTimeout(() => {
    				uni.showToast({
    					title: "图片过大，请重新上传",
    					icon: "none"
    				});
    			}, 500);
    			return false;
    		}
    	}
    }
    //请求前加入token
    options.header['token'] = "你的项目登录token";
    return options; // return false 表示请求拦截，不会继续请求
}
//请求结束
$http.requestEnd = function(options) {
	//判断当前接口是否需要加载动画
	if (options.load) {
		requestNum = requestNum - 1;
		if (requestNum <= 0) {
			uni.hideLoading();
		}
	}
}
//所有接口数据处理（可在接口里设置不调用此方法）
//此方法需要开发者根据各自的接口返回类型修改，以下只是模板
$http.dataFactory = async function(res) {
    console.log("接口请求数据", {
        url: res.url,
        resolve: res.response,
        header: res.header,
        data: res.data,
        method: res.method,
    });
    if (res.response.statusCode && res.response.statusCode == 200) {
        let httpData = res.response.data;
        if (typeof (httpData) == "string") {
            httpData = JSON.parse(httpData);
        }
        //判断数据是否请求成功
        if (httpData.success || httpData.code == 200) {
            // ---------重点----------返回正确的结果(then接受数据)------------重点------------
            return Promise.resolve(httpData.data);
        } else {
            //其他错误提示
            if (res.isPrompt) { // 是否提示
                uni.showToast({
                    title: httpData.info || httpData.msg,
                    icon: "none",
                    duration: 3000
                });
            }
            // --------重点---------返回错误的结果(catch接受数据)------------重点------------
            return Promise.reject({
                statusCode: 0,
                errMsg: "【request】" + (httpData.info || httpData.msg)
            });
        }
    } else {
		// 返回错误的结果(catch接受数据)
		return Promise.reject({
			statusCode: res.response.statusCode,
			errMsg: "【request】数据工厂验证不通过"
		});
	}
};
// 错误回调
$http.requestError = function (e) {
	if (e.statusCode === 0) {
		throw e;
	} else {
		uni.showToast({
			title: "网络错误，请检查一下网络",
			icon: "none"
		});
	}
}

通用请求方法

this.$http.request({
	url: 'aid/region',
	method: "GET", // POST、GET、PUT、DELETE、JSONP，具体说明查看官方文档
	data: {pid:0},
	timeout: 30000,  // 默认 30000 说明：超时时间，单位 ms，具体说明查看官方文档
	dataType: "json",  // 默认 json 说明：如果设为 json，会尝试对返回的数据做一次 JSON.parse，具体说明查看官方文档
	responseType: "text",  // 默认 text 说明：设置响应的数据类型。合法值：text、arraybuffer，具体说明查看官方文档
	withCredentials: false,  // 默认 false 说明：跨域请求时是否携带凭证（cookies），具体说明查看官方文档
	isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
	load: true,//（默认 true 说明：本接口是否提示加载动画）
	header: { //默认 无 说明：请求头
		'Content-Type': 'application/json'
	},
	isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数将失去作用）
}).then(function (response) {
	//这里只会在接口是成功状态返回
}).catch(function (error) {
	//这里只会在接口是失败状态返回，不需要去处理错误提示
	console.log(error);
});

get请求正常写法

this.$http.get('aid/region',{pid:0}).
then(function (response) {
	//这里只会在接口是成功状态返回
}).catch(function (error) {
	//这里只会在接口是失败状态返回，不需要去处理错误提示
	console.log(error);
});

post请求 async写法

async request(){
	let data = await this.$http.post('aid/region',{pid:0});
	console.log(data);
}

其他功能配置项

let data = await this.$http.post(
	'http://www.aaa.com/aid/region', //可以直接放链接(将不启用全局定义域名)
	{
		pid:0
	}, 
	{
		isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
		load: true,//（默认 true 说明：本接口是否提示加载动画）
		header: { //默认 无 说明：请求头
			'Content-Type': 'application/json'
		},
		isFactory: true //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数将失去作用）
	}
);

`requestConfig.js`可以设置服务器上传图片默认url

//可以new多个request来支持多个域名请求
let $http = new request({
	//服务器本地上传文件地址
	fileUrl: base.baseUrl,
	// 服务器上传图片默认url
	defaultUploadUrl: "api/common/v1/upload_image",
});

// 上传可以不用传递url（使用全局的上传图片url）
this.$http.urlImgUpload({
	name:"后台接受文件key名称", //默认 file
	count:"最大选择数",//默认 9
	sizeType:"选择压缩图原图，默认两个都选",//默认 ['original', 'compressed']
	sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
	data:"而外参数" //可不填,
});
// 上传可以不用传递url（使用全局的上传图片url）
this.$http.urlVideoUpload({
	sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
	compressed:"是否压缩所选的视频源文件，默认值为 true，需要压缩",//默认 false
	maxDuration: "拍摄视频最长拍摄时间，单位秒。最长支持 60 秒", //默认 60
	camera: '前置还是后置摄像头', //'front'、'back'，默认'back'
	name:"后台接受文件key名称", //默认 file
	data:"而外参数" //可不填,
});
// 上传可以不用传递url（使用全局的上传图片url）
this.$http.urlFileUpload({
	files: [], // 必填 临时文件路径 格式: [{path: "图片地址"}]
	data:"向服务器传递的参数", //可不填
	name:"后台接受文件key名称", //默认 file
});

本地服务器图片上传（支持多张上传）

this.$http.urlImgUpload('flie/upload',{
	name:"后台接受文件key名称", //默认 file
	count:"最大选择数",//默认 9
	sizeType:"选择压缩图原图，默认两个都选",//默认 ['original', 'compressed']
	sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
	data:"而外参数" //可不填,
	isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
	load: true,//（默认 true 说明：本接口是否提示加载动画）
	header: { //默认 无 说明：请求头
		'Content-Type': 'application/json'
	},
	isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
	maxSize: 300000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
	onSelectComplete: res => {
		console.log("选择完成返回：",res);
	},
	onEachUpdate: res => {
		console.log("单张上传成功返回：",res);
	},
	onProgressUpdate: res => {
		console.log("上传进度返回：",res);
	}
}).then(res => {
	console.log("全部上传完返回结果：",res);
});

本地服务器视频上传

this.$http.urlVideoUpload('flie/upload',{
	sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
	compressed:"是否压缩所选的视频源文件，默认值为 true，需要压缩",//默认 false
	maxDuration: "拍摄视频最长拍摄时间，单位秒。最长支持 60 秒", //默认 60
	camera: '前置还是后置摄像头', //'front'、'back'，默认'back'
	name:"后台接受文件key名称", //默认 file
	data:"而外参数" //可不填,
	isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
	load: true,//（默认 true 说明：本接口是否提示加载动画）
	header: { //默认 无 说明：请求头
		'Content-Type': 'application/json'
	},
	isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
	maxSize: 300000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
	onProgressUpdate: res => {
		console.log("上传进度返回：",res);
	},
	onSelectComplete: res => {
		console.log("选择完成返回：",res);
	},
}).then(res => {
	console.log("全部上传完返回结果：",res);
});

本地服务器文件上传（支持多张上传）

this.$http.urlFileUpload("flie/upload",{
	files: [], // 必填 临时文件路径 格式: [{path: "图片地址"}]
	data:"向服务器传递的参数", //可不填
	name:"后台接受文件key名称", //默认 file
	isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
	load: true,//（默认 true 说明：本接口是否提示加载动画）
	header: { //默认 无 说明：请求头
		'Content-Type': 'application/json'
	},
	isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
	maxSize: 300000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
	onEachUpdate: res => {
		console.log("单张上传成功返回：",res);
	},
	onProgressUpdate: res => {
		console.log("上传进度返回：",res);
	}
}).then(res => {
	console.log("全部上传完返回结果：",res);
});

七牛云图片上传（支持多张上传）

this.$http.qnImgUpload({
	count:"最大选择数", // 默认 9
	sizeType:"选择压缩图原图，默认两个都选", // 默认 ['original', 'compressed']
	sourceType:"选择相机拍照或相册上传 默认两个都选", // 默认 ['album','camera']
	load: true, //（默认 true 说明：本接口是否提示加载动画）
	maxSize: 300000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
	onSelectComplete: res => {
		console.log("选择完成返回：",res);
	},
	onEachUpdate: res => {
		console.log("单张上传成功返回：",res);
	},
	onProgressUpdate: res => {
		console.log("上传进度返回：",res);
	}
}).then(res => {
	console.log("全部上传完返回结果：",res);
});

七牛云视频上传

this.$http.qnVideoUpload({
	sourceType:"选择相机拍照或相册上传 默认两个都选",//默认 ['album','camera']
	compressed:"是否压缩所选的视频源文件，默认值为 true，需要压缩",//默认 false
	maxDuration: "拍摄视频最长拍摄时间，单位秒。最长支持 60 秒", //默认 60
	camera: '前置还是后置摄像头', //'front'、'back'，默认'back'
	load: true,//（默认 true 说明：本接口是否提示加载动画）
	maxSize: 300000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
	onSelectComplete: res => {
		console.log("选择完成返回：",res);
	},
	onProgressUpdate: res => {
		console.log("上传进度返回：",res);
	}
}).then(res => {
	console.log("全部上传完返回结果：",res);
});

七牛云文件上传（支持多张上传）

this.$http.qnFileUpload(
{
	files:[], // 必填 临时文件路径 格式: [{path: "图片地址"}]
	load: true, //（默认 true 说明：本接口是否提示加载动画）
	maxSize: 300000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
	onEachUpdate: res => {
		console.log("单张上传成功返回：",res);
	},
	onProgressUpdate: res => {
		console.log("上传进度返回：",res);
	}
}).then(res => {
	console.log("全部上传完返回结果：",res);
});

jsonp 跨域请求（只支持H5）

let data = await this.$http.jsonp('http://www.aaa.com/aid/region',{pid:0}, {
    isFactory: false, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
});

18 KiB Raw Permalink Blame History