uniapp 微信小程序 封装公共的请求js（api版本）

一、新建api文件夹
在项目目录下创建api文件夹，内放files跟index.js文件夹，files文件夹内放每个页面对应的js请求接口

1、index.js

/**
 * api接口的统一出口
 */
const api = {};
const requireComponent = require.context('./files', false, /\.js$/)
requireComponent.keys().forEach(fileName => {
  const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  const componentConfig = requireComponent(fileName)
  api[componentName] = componentConfig.default
})
export default api;

2、例如：login.js

/**
 * 登录用到的接口
 */
import http from '@/utils/http.js'
import config from '@/utils/config.js'
const login = {
	//角色001-账号登录
	transportLogin(data){
		return new Promise((resolve, reject) => {
			http.request({
				domain:config.adminDomain,//接口ip地址+端口号（第一种）
				url: "/user/login",
				method: "POST",
				data,
				callBack: res => {
					resolve(res);
				}
			})
		})
	},
	//角色002-账号登录
	regulatorLogin(data){
		return new Promise((resolve, reject) => {
			http.request({
				domain:config.domain,//接口ip地址+端口号（第二种）
				url: "/wx/login",
				method: "POST",
				data,
				callBack: res => {
					resolve(res);
				}
			})
		})
	}
}
export default login;

二、config.js

const domain = "http://192.888.888.6:80/my"
const adminDomain = "http://192.888.444.9:800"
const adminH5 = "http://192.888.666.7:82/#";
module.exports = {
	domain,
	adminDomain,
	adminH5
}

三、main.js

四、页面使用文章来源地址https://www.toymoban.com/news/detail-633068.html

<template>
	<view class="login-btn" @click="toLogin">登录</view>
	<view class="login-btn" @click="toLogin2">登录</view>
</template>

methods: {
	toLogin(){
		this.$api.login.transportLogin(data).then(res=>{
			uni.hideLoading()
			if (res.code === 200) {
				// 保存登陆信息
				uni.setStorageSync('loginResult', res)
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('login',false);
				uni.reLaunch({
					url: "/pages/learning/learning"
				})
			}
		})
	},
	toLogin2(){
		let data = {
			account: "", //用户名
			pwd: "" //密码
		};
		this.$api.login.regulatorLogin(data).then(res=>{
			uni.hideLoading()
			if (res.code === 200) {
				// 保存登陆信息
				uni.setStorageSync('loginResult', res)
				uni.setStorageSync('token', res.token);
				uni.setStorageSync('login',false);
				uni.reLaunch({
					url: "/pages/learning/learning"
				})
			}
		})
	}
}

到了这里，关于uniapp 微信小程序 封装公共的请求js（api版本）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！