如何怎么封装微信小程序的数据请求的

方式一:

1、在小程序的目录下新建一个 api 的文件夹

2:在 api 文件夹中新建一个 config.js 文件,用于存放公共的服务器地址,内容如下:

const baseUrl = 'https://www.baidu.com/';

export {

baseUrl

}

3:在 api 文件夹中新建一个 request.js 文件,用于存放封装的api请求,内容如下:

import { baseUrl } from './http.js'

module.exports = {

/*

* url:请求的接口地址

* methodType:请求方式

* data: 要传递的参数

*/

request : function(url, methodType, data){

let fullUrl = `{baseUrl}{url}`

let token = wx.getStorageSync('token') ? wx.getStorageSync('token') : ''

wx.showLoading({ title: "加载中" });

return new Promise((resolve,reject)=>{

wx.request({

url: fullUrl,

method:methodType,

data,

header: {

'content-type': 'application/json', // 默认值

'x-api-key': token,

},

success: (res) => {

if (res.data.status == 200) {

resolve(res.data)

}else{

wx.showToast({

title: res.data.msg,

icon:'none'

})

reject(res.data.message)

}

},

fail: () => {

wx.showToast({

title: '接口请求错误',

icon:'none'

})

reject('接口请求错误')

},

complete: () => {

setTimeout(() => {

wx.hideLoading()

}, 100)

}

})

})

}

}

4:在 api 文件夹中新建一个 index.js 文件,用于存放api请求的地址,内容如下:

import { request } from './request'

module.exports = {

// 获取企业列表

getCompanyList: (data) => request('/company/getlist', 'GET', data),

}

5:在文件中使用,内容如下:

// 引入 api 下的 index 文件

const $api = require('../../api/index')

// 在方法中调用

goList(){

let data = {

aaa: this.data.cardCur,

bbb: this.data.notice,

}

$api.getCompanyList(data).then((res) => {

console.log(res,'res');

})

},

方式二:

前3步是一样的,区别就是封装请求的不同

封装所有请求 api/http.js

//引入封装的reuest请求

const {

request

} = require('./request.js')

//基于业务封装的接口

module.exports = {

// 登录

getLogin: (data) => {

return request('/***/***/***/login', 'POST', data);

},

// 获取企业信息

getCompanyList: (data) => {

return request('/***/***/***/Company', 'GET', data);

},

}

使用

// 引入登录接口

import {

getLogin

} from '../../api/http.js'

Page({

data: {

username: '',

pwd: ''

},

onLoad() {

let params = {

username: this.data.username,

pwd: this.data.pwd

}

// 登录

getLogin(params).then(res => {

wx.setStorageSync('Cookie', res.cookies[0])

wx.switchTab({

url: '../index/index'

})

})

},

// 退出登录

handleLogOut() {

wx.clearStorageSync()

wx.navigateTo({

url: '../login/login'

})

},

})

相关推荐
Maynor9965 分钟前
OpenClaw 玩家必备:用 AI 自动追踪社区最新动态
java·服务器·人工智能
郝学胜-神的一滴9 分钟前
深入解析C/S模型下的TCP通信流程:从握手到挥手的技术之旅
linux·服务器·c语言·网络·网络协议·tcp/ip
WooaiJava17 分钟前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
“αβ”17 分钟前
数据链路层协议 -- 以太网协议与ARP协议
服务器·网络·网络协议·以太网·数据链路层·arp·mac地址
Never_Satisfied36 分钟前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
董世昌4137 分钟前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
Thera7771 小时前
【Linux C++】彻底解决僵尸进程:waitpid(WNOHANG) 与 SA_NOCLDWAIT
linux·服务器·c++
呉師傅1 小时前
【使用技巧】Adobe Photoshop 2024调整缩放与布局125%后出现点菜单项漂移问题的简单处理
运维·服务器·windows·adobe·电脑·photoshop
WeiXiao_Hyy1 小时前
成为 Top 1% 的工程师
java·开发语言·javascript·经验分享·后端
getapi2 小时前
Ubuntu 22.04 服务器的系统架构是否为 amd64 x86_64
linux·服务器·ubuntu