uni-app微信小程序封装一个request请求接口

news/2024/7/20 3:00:12 标签: 小程序, vue.js, javascript

在uniapp项目根目录里面新建一个文件 utils:

 再新建一个api.js:

javascript">//你的请求地址(线上或线下)
const BASE_URL = 'https://www.baidu.com/'
export const http = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded',
			},
			data: options.data || {},
			success: (res) => {
                //报错逻辑
				if (res.statusCode !== 200) {
					uni.showToast({
						icon: 'none',
						title: res.data.message
					})
				} else if (res.statusCode == 400) {
					return uni.showToast({
						icon: 'none',
						title: res.data.message
					})
				}
				resolve(res);
			},
			fail: (err) => {
				uni.showToast({
					icon: 'none',
					title: '请求失败!'
				})
				reject(err)
			}
		})
	})
}

在main.js中引入

javascript">// 封装的http请求
import {http} from 'utils/api.js'
Vue.prototype.$http = http

接口使用方法:

javascript">this.$http({
	url: 'api/sss/delelt',
    method: 'POST',//不写默认为post
    //带参数
	data: {
		type: 1,
	}
	}).then(res => {
		console.log(res);
	})


http://www.niftyadmin.cn/n/903013.html

相关文章

uniapp微信小程序搜索关键词在列表中高亮效果

先看效果图: 直接上代码: view片段: <view class"text" click"gsClick(item,index)" v-for"(item,index) in searchList" :key"index"><rich-text :nodes"item.companyName"></rich-text> </view&g…

javascript class类基础用法-01

//俗话说的好&#xff0c;用了js的class类之后&#xff0c;万物皆可new一个对象&#xff0c;我忘了new多少个对象了//创建一个类函数class UserInfo {//公共myName字段myName my name is 奥利给;//私有实例字段(只有在UserInfo主体里调用该字段,别处调用会报错)//前面加上#号就…

css让页面整体呈现灰色调

效果图: body {filter: grayscale(100%); -webkit-filter: grayscale(100%); //兼容chrome和safari和2013年后Opera-moz-filter: grayscale(100%); //兼容Firefox-ms-filter: grayscale(100%); //兼容IE、Edge-o-filter: grayscale(100%); //兼容2013年前的…

model-viewer(模型观察者),可用于查看 Web 上的 3D 模型并与之交互

我做的Demo链接(pc或手机都可以看): 模型观察者model-viewer 码云demo地址: javascriptWeb3D: 模型观察者-model-viewer Demo 手机PC效果图: 去参考文档: <model-viewer> Augmented Reality <!DOCTYPE html> <html lang"en"> <head><m…

微信小程序添加插件

先登录微信公众平台进入小程序管理后台(如图): 滚到底部点击设置: 再点击第三方设置: 点击插件管理右边的添加插件按钮: 选中添加即可添加完成&#xff0c;最后查看添加插件的详情&#xff0c;把插件代码复制到小程序开发工具或者Hbuild小程序里

uniapp微信小程序WebSocket聊天

data() {return {timeout: 10000, timeoutObj: null,socketOpen: false,}},methods: {openConnection() {// 打开连接// uni.closeSocket(); // 确保已经关闭后再重新打开uni.connectSocket({url: wss://wyt.yuyok.com:2346,success(res) {console.log(连接成功 connectSocket,…

vue h5 自制弹幕效果

效果图&#xff1a; HTML: <div id"app"><section class"content"><!-- 弹幕盒子 --><div class"bullet-chat"><!-- 弹幕 --><div class"dmGroup" v-for"(item,index) in dmData" :key&q…

js es6解构赋值

解构赋值 - JavaScript | MDN