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

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

借助插件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 : '') + url
  return 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)
})