全网小程序接口请求封装实例代码，如何改写为长尾词？

本文共计899个文字，预计阅读时间需要4分钟。

前言：这篇文章主要面向一些初学者，针对一些写的不太好的地方，还请家人们多多指教！

在utils文件夹中，新建两个js文件，一个是api.js，另一个是requtil.js。

api.js：这个文件主要包含API接口，简单来说就是一些请求的地址和方法。

requtil.js：这个文件主要是一些请求工具，比如发送请求、处理响应等。

前言

这篇文章主要针对一些初学者，有写的不好的地方，还请大家多多谅解！

在utils文件夹里面新建两个js文件，一个是api.js、一个就是requtil.js

api.js

这个文件主要api接口,废话不多说直接上代码了

const request = require('requtil.js') /*Apis 把全部api都存在这里*/ const Apis = { /* 用户相关 */ 'login': '/devicecenter/auth/weChtLoin', 'bindUser': '/devicecenter/user/userBindinOpenId', 'genQrCode': '/devicecenter/user/getUserRcode', /* 设备相关 */ 'getDeviceList': '/minipro/group/getDl', // 获取设备列表 'getDeviceAdd': '/minipro/group/addDl', // 添加设备 'getDeviceDtl': '/minipro/group/delDl', // 删除设备 } /* 定义请求方法 */ const user = { login: function(data) { request.get(Apis.login, data) }, getSecret: function(data) { request.get(Apis.getSecret, data) }, } module.exports = { ...user }

requtil.js

把微信的wx.request请求进行分开封装

const globalsetting = require('globalsetting.js') const baseURL = globalsetting.server const util = require('util.js') const ignoreUrls = [ '/auth/weChatLogin', '/user/userBindingOpenId', '/user/getSecret', '/user/getOpenId' ] var token = '' function post(url, args) { args = _prev(url, 'POST', args) wx.request(args) } function get(url, args) { args = _prev(url, 'GET', args) wx.request(args) } function put(url, args) { args = _prev(url, 'PUT', args) wx.request(args) } function _delete(url, args) { args = _prev(url, 'DELETE', args) wx.request(args) } function _prev(url, method, args) { // console.log('123',args) args = args || {} args.url = url if(args.urlparam) args.url += '/' + args.urlparam var params = parseParams(args) params.method = method params.success = success(params.success) params.fail = fail(params.fail) setToken(params) return params } // 处理接口是否需要添加header.token方法 function setToken(params) { if (!ignoreUrls.some(url => params.url.match(new RegExp(url)))) { if (!params.header) params.header = { token: getToken() } else params.header.token = getToken() } else { // console.log('ignore: ', params.url) } } // 处理接口参数方法 function parseParams(args) { var params = Object.assign(args) if (!(params.url.startsWith('') || params.url.startsWith(''))) params.url = baseURL + params.url if(params.param) { if (params.url.indexOf('?') > -1 && params.url.indexOf('?') != params.url.length - 1) { params.url += '&' } else if(params.url.indexOf('?') == params.url.length -1) { // 无任何操作 } else { params.url += '?' } var buf = '' for(var name in params.param) { let val = params.param[name]; buf += name + '=' + encodeURI(typeof val == 'object' ? JSON.stringify(val) : val) + '&' } params.url += buf } return params } // 接口返回成功方法 function success(callback) { return function(rs) { var status = rs.statusCode if (status == 405) { util.errorMsg('请求失败405：\n服务器返回失败') } else if(status == 404) { util.errorMsg('请求失败404：\n找不到接口') } if(callback) callback(rs.data) } } function fail(callback) { return function(rs) { console.log(rs) if(callback) callback(rs) } } // 获取接口请求回来的token function _setToken(tk) { token = tk wx.setStorageSync('token', token) }

页面怎么调用

在全局的app.js里面

import api from './utils/apis.js'; App({ api: api, })

index页面

通过getApp()获取api接口，自定义一个函数里面用到了promise方法获取数据，然后在getDevList调用getChatRecord方法，就可以数据赋值

const APP = getApp() getDevList(e){ this.getChatRecord().then(res => { wx.hideLoading({ success: (res) => {}, }); if(res.id == '-1') { utils.errorMsg(res.message); }else { console.log(res) } }) } // 设备列表请求接口 getChatRecord (params = {}) { return new Promise((resolve, reject) => { APP.api.getDeviceList({ success: res => { resolve(res) } }) }) },

后期我会做一个demo出来，放到github上面，这样你们看起来更直观一些

总结

到此这篇关于全网小程序接口请求封装实例的文章就介绍到这了,更多相关全网小程序接口请求封装内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！