微信小程序超详细网络请求封装，封装对后端统一api接口,方便管理

1.我们都知道微信小程序跟后端接口时，需要对后端进行网络请求，但是接口特别多的时候就不方便统一管理了，特别时要修改接口的时候；我们首先对微信小程序的post和get请求进行统一封装，我们先建一个工具类的文件夹utils,然后再这个utils新建一个http.js。

2.我们要在http.js里面对post和get请求封装，其他方法也可以自定义封装，这里不另外赘述。

 

const ipAndPort = 'http://192.168.89.89:8081';

module.exports = {

  http(url, method, params) {

    let header = {}

    if (params.data) { 

      for (let key in params.data) { 

        if (params.data[key] == null || params.data[key] == 'null') {

          delete params.data[key]

        }

      }

      data = {

        ...data,

        ...params.data

      }

    }

    if (method == 'post') {

      header = {

        'content-type': 'application/x-www-form-urlencoded'

      }

    } else if (method == 'get') {

      header = {

        'content-Type': 'application/json'

      }

    }

    wx.request({

      url: ipAndPort + url, 

      method: method == 'post' ? 'post' : 'get', 

      data: data,

      header: header,

      success(res) {

        params.success && params.success(res.data)

      },

      fail(err) {

        params.fail && params.fail(err)

      }

    })

  }

}

3.以上就是对网络请求的post和get封装，我们再在工具类的文件夹utils,建立一个文件api.js，这个文件就是对请求接口统一封装。

4.api.js的内容

 

import {http} from './http'; 

 

/**

 * 购物车接口

 */

//1.购物车删除商品

function updateCartNumber(params) {

  http('/spCart/deleteCart', 'post', params) //接口请求的路由地址以及请求方法在此处传递

}

 

export default { // 暴露接口

  /**

   * 1.购物车接口暴露

   */

  updateCartNumber,

 

}

 

 

5.在页面请求如何如何使用呢？

在页面里面我们先引入我们封装好的请求

import http from '../../utils/api'

 

 

根据业务请求使用

  http.updateCartNumber({

      data:{

        user_id:'3',

        number:'3' },

      success:function(res){

       wx.hideLoading({})

        that.setData({

          shopList:res.data.list

        })

      }

    })

如果帮助到你麻烦给我点个赞吧，不懂得可以评论。