tui-request 网络请求

介绍

网络请求：支持Promise，支持请求拦截和响应拦截,支持请求未结束之前阻止重复请求等，具体使用请参考文档。

引入

uni-app引入

在 main.js 中全局引入

import http from './components/common/tui-request'

//初始化请求配置项
http.create({
	host: 'https://www.thorui.cn',
	header: {
		'content-type': 'application/x-www-form-urlencoded'
	}
})
//请求拦截
http.interceptors.request.use(config => {
	let token = uni.getStorageSync('thorui_token');
	if (config.header) {
		config.header['Authorization'] = token
	} else {
		config.header = {
			'Authorization': 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.use(store)
	app.config.globalProperties.http = http;
	return {
		app
	}
}
// #endif

微信小程序引入

在 app.js 中全局引入

import http from './components/common/tui-request/index'
//初始化请求配置项
http.create({
	host: 'https://www.thorui.cn',
	header: {
		'content-type': 'application/x-www-form-urlencoded'
	}
})
//请求拦截
http.interceptors.request.use(config => {
  console.log('进入了请求拦截~')
	let token = wx.getStorageSync('thorui_token');
	if (config.header) {
		config.header['Authorization'] = token
	} else {
		config.header = {
			'Authorization': token
		}
	}
	return config
})
//响应拦截
http.interceptors.response.use(response => {
  //TODO
  console.log('进入了响应拦截~')
	return response
})

wx.$http = http

代码演示

部分功能演示，具体可参考示例程序以及文档API。

    /**
	 * 案例只展示了get请求，post请求和get请求类似 this.http.post
	 * 其他请求方式，如PUT、DELETE等，请使用api：this.http.request
	 * */
	// uni-app中使用
	//返回全部数据
	get() {
		this.http.get('/Home/GetStatus').then(res => {
			console.log(res)
			const d = res.data;
			if (d.code == 100) {
				this.tui.toast('请求成功！')
			}
		}).catch(e => {
			console.log(e)
		})
	},
	//返回简洁数据
	get2() {
		this.http.get('/Home/GetStatus', {
			//参数
			//data:{version:'v1.6.3'},
			//仅返回data数据
			concise: true
		}).then(res => {
			console.log(res)
			if (res.code == 100) {
				this.tui.toast('请求成功！' + JSON.stringify(res))
			}
		}).catch(e => {
			console.log(e)
		})
	},
	//携带参数
	get3() {
		this.http.request({
			url: '/Home/GetStatus',
			method: 'GET',
			data: {
				version: 'v1.6.3'
			}
		}).then(res => {
			console.log(res)
			const d = res.data;
			if (d.code == 100) {
				this.tui.toast('请求成功！' + JSON.stringify(d))
			}
		}).catch(e => {})
	},
	get4() {
		//合并多个请求：都返回数据后再进行其他操作
		let func1 = this.http.get('/Home/GetStatus')
		let func2 = this.http.get('/Home/GetStatus', {
			concise: true
		})
		this.http.all([func1, func2]).then(res => {
			console.log(res)
			this.tui.toast('请求成功！')
		}).catch(e => {})
	},
	async get5() {
		//异步转同步
		let res = await this.http.get('/Home/GetStatus', {
			concise: true
		})
		console.log(res)
		console.log('计算结果：1+res.data=' + (1 + res.data))
		this.tui.toast('请求成功！' + JSON.stringify(res))
	}
	
	
//微信小程序中使用
	
//返回全部数据
  get() {
	wx.$http.get('/Home/GetStatus').then(res => {
	  console.log(res)
	  const d = res.data;
	  if (d.code == 100) {
		tui.toast('请求成功！')
	  }
	}).catch(e => {
	  console.log(e)
	})
  },
  //返回简洁数据
  get2() {
	wx.$http.get('/Home/GetStatus', {
	  //参数
	  //data:{version:'v1.6.3'},
	  //仅返回data数据
	  concise: true
	}).then(res => {
	  console.log(res)
	  if (res.code == 100) {
		tui.toast('请求成功！' + JSON.stringify(res))
	  }
	}).catch(e => {
	  console.log(e)
	})
  },
  get3() {
	wx.$http.request({
	  url: '/Home/GetStatus',
	  method: 'GET',
	  data: {
		version: 'v1.6.3'
	  }
	}).then(res => {
	  console.log(res)
	  const d = res.data;
	  if (d.code == 100) {
		tui.toast('请求成功！' + JSON.stringify(d))
	  }
	}).catch(e => {})
  },
  get4() {
	//合并多个请求：都返回数据后再进行其他操作
	let func1 = wx.$http.get('/Home/GetStatus')
	let func2 = wx.$http.get('/Home/GetStatus', {
	  concise: true
	})
	wx.$http.all([func1, func2]).then(res => {
	  console.log(res)
	  tui.toast('请求成功！')
	}).catch(e => {})
  },
  async get5() {
	let res = await wx.$http.get('/Home/GetStatus', {
	  concise: true
	})
	console.log(res)
	console.log('计算结果：1+res.data=' + (1 + res.data))
	tui.toast('请求成功！' + JSON.stringify(res))
  }

config 所有配置项

config() {
	return {
		//接口域名：https://base.com
		host: '',
		//接口地址：/login
		url: '',
		//请求参数
		data: {},
		//请求头
		header: {
			'content-type': 'application/json'
		},
		method: 'POST',
		//请求超时时间，大于0时才生效，否则使用全局配置或者默认值
		timeout: 0,
		dataType: 'json',
		//请求taskKey(String),拦截重复请求，不同接口请求名称不可相同，否则会拦截重复key的请求，不传默认不拦截
		requestTaskKey: '',
		//是否只返回简洁的接口数据：true 仅返回接口数据data，false 返回包含header、statusCode、errMsg、data等数据
		concise: false,
		//请求时是否显示默认loading等待框
		showLoading: true,
		//请求失败时提示的错误消息，为空则不提示
		errorMsg: '网络不给力，请稍后再试~'
	}
}

Methods

const http = {
	interceptors: {
		request: {
			//请求拦截
			use: (fulfilled, rejected) => {},
			//移除拦截
			eject: (name) => {}
		},
		response: {
			//响应拦截
			use: (fulfilled, rejected) => {},
			//移除拦截
			eject: (name) => {}
		}
	},
	//初始化配置项，详细config见文档配置说明
	create(config) {},
	//get请求，参数url，config
	get(url, config = {}) {},
	//post请求，参数url，config
	post(url, config = {}) {},
	//合并请求，参数requests：[func1, func2]
	all(requests) {},
	//request请求，可以发起任何平台支持的请求方式，get，post等
    request(config = {}) {}
}

预览

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码