微信小程序封装request请求数据

遇到问题不要慌

做项目离不开请求数据

1.为什么要封装api去请求接口数据

做微信小程序的时候请求数据的时候会多次用到wx.request请求，如果每次都去写一遍

wx.request({url: 'example.php', //仅为示例，并非真实的接口地址data: {x: '',y: ''},header: {'content-type': 'application/json' // 默认值},success (res) {console.log(res.data)}
})

反复的复制这段代码，会让自己的项目代码比较冗余，接下来就需要封装一个api去有效的管理接口请求

额就不多说废话了，直接上代码了

首先在util文件下新建一个api.js文件

api封装代码

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';const baseURL = 'http://kumanxuan1.f3322.net:8001';function request(method, url, data) {return new Promise(function(resolve, reject) {let header = {'content-type': 'application/json',};wx.request({url: baseURL + url,method: method,data: method === POST ? JSON.stringify(data) : data,header: header,success(res) {console.log(res);//请求成功返回数据resolve(res.data);},fail(err) {//请求失败reject(err)console.log(err);}})})
}// 请求不同的接口const API = {getListData: () => request(GET, `/index/index`),SearchGoodsListApi:() => request(GET,`/search/index`)
};
module.exports = {API
}

在自己需要发请求的页面调用这个api就可以使用了
在.js文件里引入api.js下的API

//引入api.js文件 ，通过$api.xxx( )去调用接口获取数据
const $api = require('../../utils/api').API; Page({/*** 页面的初始数据*/data: {dataList: [ ]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 调用接口列表页数据请求$api.getListData().then(res => {//请求成功console.log(res.data);}).catch(err => {//请求失败})//搜索商品的数据请求$api.SearchGoodsListApi().then(res => {//请求成功console.log(res.data);}).catch(err => {//请求失败})},})

请求成功，返回的数据

上面我所使用的接口真实有效，没有接口的小伙伴可以使用此接口测试，封装的api是否报错

微信小程序封装request请求数据相关推荐

微信小程序request请求封装；微信小程序封装request请求；uni-app小程序封装request请求；
本片封装了微信小程序request请求:为别是post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的request.js封装uni.request ...
微信小程序封装request请求，primise队列化，async await做同步处理，缓存token信息
话不多数直接上代码! 在app.js文件中加入,一般新建的项目都有globalData只需要在里面添加你的信息就行了 globalData: {Ip:'',Header:{ //request 请求头 ...
微信小程序----封装request以及对接口进行模块化
微信小程序----封装request以及对接口进行模块化 1. 封装request:http.js export default function request(params) {return ne ...
【微信小程序提取公共请求数据】
[微信小程序提取公共请求数据] 在utils下设置一个http.js const url = 'https://api.shop.eduwork.cn'; const request = (path= ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
微信小程序封装api请求步骤
小程序发起网络请求需用到 wx.request() 废话不多说直接开始封装 1.首先创建一个request文件夹里边创建一个api.js和request.js 2.封装的请求在request.js ...
微信小程序wx.request请求服务器json数据并渲染到页面
微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx ...
小程序promise封装post请求_Promise封装微信小程序的Request请求
回调地狱一向是影响开发和维护的症结所在,无数个success()的嵌套再嵌套,导致代码层级颇深,盘一次逻辑都要费劲千辛万苦,ES6语法中的Promise,便是专为解决JS中异步请求回调的信任问题而存在 ...
微信小程序网络请求异常怎么办_监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

微信小程序封装request请求数据

1.为什么要封装api去请求接口数据

额就不多说废话了，直接上代码了

上面我所使用的接口真实有效，没有接口的小伙伴可以使用此接口测试，封装的api是否报错

微信小程序封装request请求数据相关推荐

最新文章

热门文章

微信小程序封装request请求数据

1.为什么要封装api去请求接口数据

额 就不多说废话了，直接上代码了

上面我所使用的接口真实有效，没有接口的小伙伴可以使用此接口测试，封装的api是否报错

微信小程序封装request请求数据相关推荐

最新文章

热门文章

额就不多说废话了，直接上代码了