摘要:开始写小程序的时候对小程序请求接口的相当无奈,因为项目急就没考虑那么多,直接开干。
开始写小程序的时候对小程序请求接口的requestAPI相当无奈,因为项目急就没考虑那么多,直接开干。后边闲下来就考虑了一下做了一个封装,来统一做一些数据处理,达到减轻开发重复性,优化代码的作用:
首先我封装了一个类:
import { base_url } from "../config/api" // 引入我们接口的ip,后续我们只需要传入api const tips = { 1: "抱歉,出现了一个错误", 1005: "appkey无效,请求错误", 3000: "没有权限", ... } // 多种错误处理字符串 ---------- export default class HTTP { fetch (params) { const { url, method = "GET", data = {}, success } = params // es6对象解构请求是我们需要的传参和成功的处理 wx.request({ url: base_url + url, method, data, header: { "Content-Type": "application/json" }, success: res => { const { code } = res.data if (code === 0) { // 与后台约定的成功判断 success && success(res.data) // 成功的回调 return } const { error_code } = res.data this._show_error(error_code) // 失败的处理,弹出提示框 }, fail: err => { this._show_error(1) // 失败的处理,弹出提示框 } }) } _show_error (error_code = 1) { const tip = tips[error_code] wx.showToast({ title: tip ? tip : tips[1], icon: "none", duration: 2000 }) } }
这里,我们做了一个简单的基础封装,但是也是必须从回调中做出相应的处理,如果我们需要一个变量直接拿到这次请求的数据呢,那我们就需要用到promise, async await 来进行处理了,代码如下:
import { base_url } from "../config/api" // 引入我们接口的ip,后续我们只需要传入api const tips = { 1: "抱歉,出现了一个错误", 1005: "appkey无效,请求错误", 3000: "没有权限", ... } // 多种错误处理字符串 export default class HTTP { fetch (params) { return new Promise((resolve, reject) => { const { url, method = "GET", data = {}, success } = params // es6对象解构请求是我们需要的传参和成功的处理 wx.showLoading("加载中") wx.request({ url: base_url + url, method, data, header: { "Content-Type": "application/json" }, success: res => { const { data = {}, // data默认是一个对象 data : { code, msg } } = res if (code === 0) { // 与后台约定的成功判断 wx.showToast({ title: msg }) resolve([null, _data]) // 成功的回调 return } const { error_code } = res.data this._show_error(error_code) // 失败的处理,弹出提示框 reject([data]) // 失败的回调,并暴露出数据 }, fail: err => { this._show_error(1) // 失败的处理,弹出提示框 reject([{msg = "请求出错"}]) // 失败处理 }, complete: () => { wx.hideLoading("加载中") } }).catch(err => err) } }) _show_error (error_code = 1) { const tip = tips[error_code] wx.showToast({ title: tip ? tip : tips[1], icon: "none", duration: 2000 }) } }
然后我们在调用的时候直接利用async和await:
import HTTP from "../util/HTTP " import api from "../api" // 引入接口 class Model extends HTTP { async search (data) { const [err, res] = await this.Fetch({ url: api, data }) if(err){ //失败做的对应处理 return } // 成功的对应处理 } }
如果不采用继承的方式,那么直接实例化HTTP然后调取fetch也是一样的方式,这里就不过多演示了
希望大家能提出积极的建议,有问题可以联系我
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105434.html
摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...
摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...
摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...
摘要:只用,只封装了,等有用到再重写,接口用的主要代码请求前端使用获取缓存里面的这里是控制器方法回调 request 只用POST,只封装了POST,等有用到GET再重写,接口用的ThinkPHP5.0 主要代码 var apiurl = xxxxx; function http_post(controller,data,cb){ wx.request({ url:apiurl+...
阅读 1378·2021-10-08 10:04
阅读 2681·2021-09-22 15:23
阅读 2724·2021-09-04 16:40
阅读 1172·2019-08-29 17:29
阅读 1492·2019-08-29 17:28
阅读 2988·2019-08-29 14:02
阅读 2221·2019-08-29 13:18
阅读 838·2019-08-23 18:35