手把手教你微信小程序封装请求接口文件

手把手教你微信小程序封装请求接口文件

借助插件apifm-wxapi;什么是apifm-wxapi,官方的介绍来回答一下这个问题：

首先你需要检查一下你的小程序项目是否支持 npm ，判断标准很简单，你看一下你的小程序根目录下有没有 “package.json” 这个文件，有这个文件，说明是支持的，没有这个文件，说明还不支持；如果你的小程序项目还不支持 npm ，怎么办呢？ 很简单，只要在根目录运行 npm init 命令就可以了；

第一步:npm 安装模块

npm install apifm-wxapi

第二步:构建 npm 点击微信小程序开发工具–> 工具 --> 构建 npm

第三步:在需要的页面的 js 文件头部引入 “apifm-wxapi”

const WXAPI = require('apifm-wxapi')

言归正传 首先封装一个异步请求文件

var API_BASE_URL = '网址'
var subDomain = '专属域名'
//接收的参数有 url(线上接口), needSubDomain(布尔值是否需要专属域名) method(请求方式'post,get') data(参数,传递过来一个对象)
let request = (url, needSubDomain, method, data) => {const _url = API_BASE_URL + (needSubDomain ? '/' + subDomain : '') + urlreturn new Promise((resolve, reject) => {//例如小程序请求接口wx.request({// 配置请求参数url: _url,method: method,data: data,header: {//设置请求头'Content-Type': //'(根据要求)'},success(request) {resolve(request.data)},fail(error) {reject(error)},complete(aaa) {// 加载完成}})})
}

封装一个请求线上接口的文件

//请求轮播图
request_banner: (data) => {return request('请求路径', true, 'post', data)
},//请求商品
request_goods: (data) => {return request('请求路径', true, 'post', data)
},
//请求商品详情
request_details: (data) => {return request('请求路径', true, 'post', data)
},

在需要调用请求的文件直接调用即可

WXAPI.request_banner({data:data,}).then(function (res) {//查看返回数据console.log(res)
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！