微信小程序如何封装api（详解~）

首先创建一个http文件

1.创建一个文件 例：env.js用来设置公共访问的url，即环境地址

//设置公共访问的url.即环境地址

//commonJS规范--node.js采用的就是该规范  引入：require
module.exports={
    //开发环境
	dev:{
    baseUrl:'http://localhost:3000'   //例子
    },
    //测试环境
    test:{
    baseUrl:'http://www.test.com'  //例子
    },
    //线上环境（公共部分）
    prod:{
    baseUrl:'https://api.it120.cc'
    }
}

//ES6  module --Vue中通常采用ES6的模块化规范  引入：import2.

2.二次封装 ajax请求，创建个request.js(自定义)

//引入env中的url
const { baseUrl } = require('./env').prod

//专用域名
const SubDomain = 'xxx'

module.exports = {

//二次封装wx.request
//url:请求接口的地址//
// methode:请求方式 GET POST
//data:要传递的参数
//isSubdomain:表示是否添加二级子域名

		request: (url, method, data, isSubDomain) => {
			// console.log('这是我的ajax请求', baseUrl);
			let _url = `${baseUrl}/${isSubDomain ? SubDomain : ''}${url}`;
    		// console.log(_url)
    	
    		return new Promise((resolve, reject) => {
      			wx.showLoading({
       		 	title: '加载中'
      		})

      		wx.request({
        		url: _url,
        		data: data,
        		method: method,
        		header: {
          			'content-type': 'application/x-www-form-urlencoded'
       			},
       			success(res) {
         			// console.log(res)

          			resolve(res)
          			wx.hideLoading()
       			 },
        		fail() {
          			reject('接口请求错误')
        		}
      		})
    	})
   	},
}

3.创建一个api.js文件

//引入reuest请求
const { request } = require('./request')

//基于业务封装的数据请求
module.exports = {
/**
* 列表数据方法
*/
getList: ( id ) => {
	// console.log('获取商品列表接口')
   	return request('/goods/list', 'GET', { id }, true);
   	},
}
   

4.在需要请求数据的页面中调用即可

const { getList } = require("../../http/api.js") 
	
 //引用我们要调用的方法
 /*** 生命周期函数--监听页面加载*/
	
	 onLoad: function () {
	 	//假如需要传递参数 => id
	 例：let id = 21321
	 	
    // 调用方法
    getList( id ).then(res => {
      this.setData({
        getList: res.data
	     })
      })
    },
	

这样更加方便我们对后台接口进行管理，代码整洁 美滋滋~