Request 网络请求

概述

Request 网络请求，支持Promise，可在发起请求和请求响应之前进行拦截。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

非Nvue：在根目录main.js中全局引入

import http from './components/firstui/fui-request'

//初始化请求配置项
http.create({
	//接口域名
	host: 'https://ffa.firstui.cn',
	header: {
		// 'content-type': 'application/x-www-form-urlencoded'
	}
})
//请求拦截
http.interceptors.request.use(config => {
	//请求之前可在请求头中加入token等信息
	let token = uni.getStorageSync('firstui_token') || 'testToken';
	if (config.header) {
		config.header['token'] = token
	} else {
		config.header = {
			'token': token
		}
	}
	return config
})
//响应拦截
http.interceptors.response.use(response => {
	//TODO
	return response
})
// #ifndef VUE3
Vue.prototype.http = http
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.config.globalProperties.http = http;
	return {
		app
	}
}
// #endif

Nvue：新建js文件，如fui-request.js，写入以下代码

由于nvue端不支持在main.js中全局引入，所以需要单独建js文件做全局配置，然后每个页面引入创建的js文件使用即可。

import http from '@/components/firstui/fui-request'

//初始化请求配置项
http.create({
	host: 'https://ffa.firstui.cn',
	header: {
		// 'content-type': 'application/x-www-form-urlencoded'
	}
})
//请求拦截
http.interceptors.request.use(config => {
	//请求之前可在请求头中加入token等信息
	let token = uni.getStorageSync('firstui_token') || 'testToken';
	if (config.header) {
		config.header['token'] = token
	} else {
		config.header = {
			'token': token
		}
	}
	return config
})
//响应拦截
http.interceptors.response.use(response => {
	//TODO
	return response
})

export default http

代码演示

以下为非nvue端使用方式，nvue端参考引入说明创建js文件，将示例中 this.http 换成引入变量名即可。

GET请求

通过 data 传入接口所需参数。

this.http.get('/api/example/info', {
	data: {
		id: 1
	}
}).then(res => {
	console.log(res)
	const d = res.data;
	if (d.succeeded) {
		this.fui.toast('请求成功！')
	}
}).catch(e => {
	console.log(e)
})

POST请求

通过 data 传入接口所需参数，brief 参数控制是否返回简洁数据，为true返回数据则不包含请求头等信息。

post(brief) {
	this.http.post('/api/example/info', {
		brief: brief,
		data: {
			Id: 2,
			Name: '张三'
		}
	}).then(res => {
		console.log(res)
		const d = res.data;
		if (d.succeeded) {
			this.fui.toast('请求成功！')
		}
	}).catch(e => {
		console.log(e)
	})
}

自定义接口域名

通过 host 参数修改默认接口域名，只对本次请求有效。

changeHost() {
	this.http.get('/api/example/info', {
		host: 'https://ffa.firstui.cn'
	}).then(res => {
		console.log(res)
		const d = res.data;
		if (d.succeeded) {
			this.fui.toast('请求成功！')
		}
	}).catch(e => {
		console.log(e)
	})
}

合并多个请求

全部返回数据后再进行其他操作。

all() {
	//合并多个请求：
	let func1 = this.http.get('/api/example/info')
	let func2 = this.http.get('/api/example/info', {
		data: {
			id: 3
		}
	})
	this.http.all([func1, func2]).then(res => {
		console.log(res)
		this.fui.toast('请求成功！')
	}).catch(e => {})
}

同步请求

异步转同步，等待请求结束再执行其他操作。

async sync() {
	console.log('同步请求start...')
	let res = await this.http.get('/api/example/info')
	console.log(res)
	console.log('同步请求end...')
	this.fui.toast('请求成功！')
}

request方法请求

支持多种请求方式，method 有效值必须大写，有效值在不同平台差异说明请参考uni-app文档 (opens new window)。

request() {
	this.http.request({
		url: '/api/example/info',
		method: 'GET',
		data: {
			id: '100'
		}
	}).then(res => {
		console.log(res)
		const d = res.data;
		if (d.succeeded) {
			this.fui.toast('请求成功！')
		}
	}).catch(e => {})
}

Nvue端使用 GET请求

根据上方文档引入说明创建 fui-request.js，在页面中引入即可。

//引入
import http from '@/common/fui-request.js'

//发起请求
http.get('/api/example/info', {
	data: {
		id: 1
	}
}).then(res => {
	console.log(res)
	const d = res.data;
	if (d.succeeded) {
		this.fui.toast('请求成功！')
	}
}).catch(e => {
	console.log(e)
})

Methods

方法名	说明	传入参数
interceptors.request.use	请求拦截	-
interceptors.request.eject	移除请求拦截	name：请求拦截器变量
interceptors.response.use	响应拦截	-
interceptors.response.eject	移除响应拦截	name：响应拦截器变量
create	初始化配置项	config，完整参数见文档配置说明
get	get请求	url，config
post	post请求	url，config
all	合并请求	requests：[func1, func2]
request	request请求，可以发起任何平台支持的请求方式，GET，POST，PUT等	config，完整参数见文档配置说明
abort	中断请求，请求长时间未响应时可手动中断请求	cancelToken：详见config中说明

const http = {
	interceptors: {
		request: {
			use: (fulfilled, rejected) => {},
			eject: (name) => {}
		},
		response: {
			use: (fulfilled, rejected) => {},
			eject: (name) => {}
		}
	},
	create(config) {},
	get(url, config = {}) {},
	post(url, config = {}) {},
	all(requests) {},
	request(config = {}) {},
	abort(cancelToken) {}
}

Config配置参数

//如果未设置则使用默认值
config() {
	return {
		//接口域名：https://firstui.cn（如果host为空，则直接使用传入的目标地址url）
		host: '',
		// 接口地址：/order/getList（如果host为空，直接传入：https://firstui.cn/order/getList）
		url: '',
		//参数
		data: {},
		//请求头
		header: {
			/*
			 * content-type:
			 * application/x-www-form-urlencoded
			 * application/json
			 */
			'content-type': 'application/json'
		},
		method: 'POST',
		//大于0时才生效，否则使用全局配置或者默认值
		timeout: 0,
		dataType: 'json',
		//是否阻止拦截重复的请求（重复：请求地址url + method + 参数data 一致）
		prevent: false,
		//Array<String> 参数data中的key，prevent为true时有效，进行重复请求判断时移除keys中相关参数，如时间戳、随机数等.
		keys: [],
		//是否仅返回简要数据：true-仅返回接口数据data，false-返回包含header、statusCode、errMsg、data等数据
		brief: false,
		//String 请求标记，用于中断该请求，不同请求不可重复，只可包含数字、字母、下划线，如：firstui_001
		cancelToken: '',
		//发起请求时是否显示加载loading
		showLoading: true,
		//加载中提示文本，为空时显示默认提示，showLoading为true时有效 [V1.3.0+]
		loadingText: '',
		//请求出错时提示语，为空则不提示
		errorMsg: '网络不给力，请检查网络设置！',
		//跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
		withCredentials:false,
		//DNS解析时优先使用ipv4,仅 App-Android 支持 (HBuilderX 2.8.0+)
		firstIpv4:false,
		//【V1.8.0+】get请求时参数值为数组时处理方式，可选值：comma-值逗号拼接，repeat-重复参数名，brackets-带中括号参数名，indices-数组下标参数名
		arrayFormat: 'comma'
	}
}

// Config配置参数 arrayFormat 不同值输出参数示例 【V1.8.0+】：

1、arrayFormat: 'indices'
-- 参数 {a:['b', 'c']} 输出结果：'a[0]=b&a[1]=c'

2、arrayFormat: 'brackets'
-- 参数 {a:['b', 'c']} 输出结果：'a[]=b&a[]=c'

3、arrayFormat: 'repeat'
-- 参数 {a:['b', 'c']} 输出结果：'a=b&a=c'

4、arrayFormat: 'comma' （uniapp默认使用此方式）
-- 参数 {a:['b', 'c']} 输出结果：'a=b,c'

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)