小程序的工程化API封装

99 阅读1分钟

在企业项目中,分散的请求API往往会导致后期维护成本增高,不易维护等缺点,所以在规范化工程开发中,一般都会对请求进行封装,实现统一管理和维护。

服务器请求代码:

request.js

const baseURL = 'http://129.211.169.131:6368'

const request =(url,method,data)=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      url: `${baseURL}${url}`,
      method,
      data,
      success:(res)=>{
        resolve(res)
      },
      fail:err=>{
        reject(err)
      }
    })
  })
}
export default request

业务API

xxx.api.js

import request from '../utils/request';
export const getFractionShop = ()=> request("/xxxxx","get")
export const getShellList = (data)=> request("/xxxxx",'get',data)

使用封装后的接口

import { getFractionShop } from '../../api/xxx'

  getData(){
    getFractionShop().then(res=>{
      console.log(res.data)
      this.setData({
        shopList:res.data.fractions
      })
    })
  },
  onLoad(options) {
    wx.getLocation({
      success:(res)=>{
        console.log(res)
        let {latitude, longitude} = res
        getShellList({point:latitude+','+longitude}).then(res=>{
          console.log(res)
          this.setData({
            shellList:res.data.list
          })
        })
      }
    })
  },