小程序中的api接口请求封装

时隔数日，我又回来了，哈哈
接下来一起看看小程序的接口请求封装步骤吧！

go~~~

第一步：在小程序的目录下新建一个 api 的文件夹，如下图：

第二步：在 api 文件夹中新建一个 http.js 文件，用于存放公共的服务器地址，内容如下：

let baseUrl = 'http://127.0.0.1';export {baseUrl
}

第三步：在 api 文件夹中新建一个 request.js 文件，用于存放封装的api请求，内容如下：

import { baseUrl } from './http.js'module.exports = {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,methodType,data,header: {'content-type': 'application/json', // 默认值// 'x-api-key': token,},success(res){if (res.data.status == 200) {resolve(res.data)wx.hideLoading()}else{wx.hideLoading()wx.showToast({title: res.data.msg,icon:'none'})reject(res.data.message)}},fail(){wx.showToast({title: '接口请求错误',icon:'none'})reject('接口请求错误')}})})}
}

第四步：在 api 文件夹中新建一个 index.js 文件，用于存放api请求的地址，内容如下：

import { request } from './request'module.exports = {// 获取报废地点queryAddressList: (data) => request('/company/getlist', 'GET', data),
}

第四步：在文件中使用，内容如下：

// 引入 api 下的 index 文件
const api = require('../../api/index')// 在方法中调用goRegister(){// wx.navigateTo({//   url: '../home-list/register/index'// })let data = {aaa: this.data.cardCur,bbb: this.data.notice,}api.queryAddressList(data).then((res) => {console.log(res,'res');})},

至此完成，感谢支持！

小程序中的api接口请求封装相关推荐

微信小程序+OLAMI自然语言API接口制作智能查询工具--快递、聊天、日历等
微信小程序最近比较热门,再加上自然语义理解也越来越被人关注,于是我想赶赶潮流,做一个小程序试试.想来想去快递查询应该是一种比较普遍的需求. 如果你也在通过自然语言接口做点什么,希望我的这篇博客能帮到你 ...
百度小程序源码php_dedecms织梦小程序插件万能api接口插件（支持百度微信小程序）...
dedecms织梦小程序插件万能api接口,让你无需有php或sql基础,不需要依赖任何第三方网站授权,后台一键安装,小程序分分钟配置完成,让你拥有真正属于自己的小程序!支持gbk和utf版 dede ...
dedecms织梦小程序插件万能api接口插件1.1版上线（同步支持百度小程序、微信小程序）
我自己开发的dedecms织梦小程序插件万能api接口,无需有php或sql基础,不需要依赖任何第三方网站授权,后台一键安装,支持gbk和utf版 dedecms小程序插件目前主要的功能有: (1)网 ...
小程序与后台 api接口数据交互详解（微信报修小程序源码讲解七）
完成用户授权登录逻辑后,接下来的开发工作大部分都是与后台 api 接口的交互,本节我们详细讲解一下小程序如何与 api 进行交互 . 小程序如何发送 http/https 请求到后台? 小程序请求 h ...
微信小程序使用豆瓣API接口
douban: function (){ wx.request({ url: 'https://douban.uieee.com/v2/book/1220562', //必须要设置"cont ...
微信小程序合成海报_利用微信小程序中Canvas API来合成海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下其他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToT ...
小程序发布线上接口请求失败，开发者工具请求正常，体验版和开发版要打开调试才可以正常请求解决办法
遇到这样的问题一般都是域名或者服务器出了问题先打开小程序后台找到开发管理-开发设置,如下图看看你的请求路径是否在ip白名单中,这里可以填ip地址如127.11.11.11或者https://baid ...
微信小程序上传API接口wx.uploadFile的坑
小程序的坑比较多,原因在于小程序开发文档相当的不全,所以开发小程序是比较痛苦的,但也正是因为坑多,技术却一步一步的往上升了...不知道该笑还是该哭. 进入正题:wx.uploadFile的坑坑一:返 ...
小程序中使用FLY框架请求接口封装
Fly官网GitHub - wendux/fly: Supporting request forwarding and Promise based HTTP client for all JavaSc ...
微信小程序利用缓存提高接口请求性能
对于接口数据过多的接口可以使用缓存提升用户体验和性能,同时也可以防止用户重复请求过多次数 data: {leftMenuList:[],//左侧菜单数据rightContent:[],//右侧的商品数 ...

小程序中的api接口请求封装

小程序中的api接口请求封装相关推荐

最新文章

热门文章