# tui-request 网络请求 开源组件

介绍

Network request,发起网络请求,简单的封装与使用

完整封装版本 请使用tui-request 数据请求

# 引入

# uni-app引入

ThorUI项目常用的 this.tui.xx API 封装在 common 文件夹下 httpRequest.js 中。

//在main.js 中引入
import tui from './common/httpRequest'
//全局注册,使用方法为this.tui
Vue.prototype.tui = tui

# 微信小程序引入

在页面js文件中引入

import tui from '../../../common/httpRequest'

# 代码演示

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

//uni-app
request: function(type) {
	//参数
	let postData = {}
	this.tui.request("/Home/GetStatus", "GET", postData, false,true, type == 1 ? false : true).then((res) => {
		if (res.code == 100) {
			this.result = `${type == 1 ?"带":"无"}loading请求成功!返回值为 ${JSON.stringify(res)}`
		} else {
			this.result = `${type == 1 ? "带" : "无"}loading请求失败! ${JSON.stringify(res)}`
		}
	}).catch((res) => {
		this.result = `${type == 1 ? "带" : "无"}loading请求失败! ${JSON.stringify(res)}`
	})
}

//微信小程序
request: function (e) {
    let type=e.currentTarget.dataset.type
    //参数
    let postData = {}
    tui.request("/Home/GetStatus", "GET", postData, false, true, type == 1 ? false : true).then((res) => {
      if (res.code == 100) {
        this.setData({
          result: `${type == 1 ? "带" : "无"}loading请求成功!返回值为 ${JSON.stringify(res)}`
        })
      } else {
        this.setData({
          result: `${type == 1 ? "带" : "无"}loading请求失败! ${JSON.stringify(res)}`
        })
      }
    }).catch((res) => {
      this.setData({
        result: `${type == 1 ? "带" : "无"}loading请求失败! ${JSON.stringify(res)}`
      })
    })
 }

# request方法参数说明

/**
	 * 请求数据处理
	 * @param string url 请求地址
	 * @param string method 请求方式
	 *  GET or POST
	 * @param {*} postData 请求参数
	 * @param bool isDelay 是否延迟显示loading
	 * @param bool isForm 数据格式
	 *  true: 'application/x-www-form-urlencoded'
	 *  false:'application/json'
	 * @param bool hideLoading 是否隐藏loading
	 *  true: 隐藏
	 *  false:显示
*/
request: async function(url, method, postData, isDelay, isForm, hideLoading)

# 预览

# 特别说明

  • 该组件为 开源组件,uni-app版所有用户均可免费使用。
  • 微信小程序原生版仅开源至v1.4.2,后续版本需开通会员才可获取使用。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
Last Updated: 7/21/2023, 2:12:46 PM