[移动开发]微信小程序封装request请求数据

做项目离不开请求数据

1.为什么要封装api去请求接口数据

做微信小程序的时候请求数据的时候会多次用到wx.request请求，如果每次都去写一遍

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

反复的复制这段代码，会让自己的项目代码比较冗余，接下来就需要封装一个api去有效的管理接口请求

额 就不多说废话了，直接上代码了

首先在util文件下新建一个api.js文件

api封装代码

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';

const baseURL = 'http://kumanxuan1.f3322.net:8001';

function request(method, url, data) {
    return new Promise(function(resolve, reject) {
        let header = {
            'content-type': 'application/json',
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === POST ? JSON.stringify(data) : data,
            header: header,
            success(res) {
                console.log(res);
                //请求成功返回数据
                resolve(res.data);
            },
            fail(err) {
                //请求失败
                reject(err)
                console.log(err);
            }
        })
    })
}


// 请求不同的接口

const API = {
    getListData: () => request(GET, `/index/index`),
    SearchGoodsListApi:() => request(GET,`/search/index`) 
};
module.exports = {
    API
}

在自己需要发请求的页面调用这个api就可以使用了
在.js文件里引入api.js下的API

//引入api.js文件 ，通过$api.xxx( )去调用接口获取数据
const $api = require('../../utils/api').API; 

Page({

    /**
     * 页面的初始数据
     */
    data: {
      dataList: [ ]
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
            // 调用接口列表页数据请求
            $api.getListData()
                .then(res => {
                   //请求成功
                   console.log(res.data);
					
                })
                .catch(err => {
                   //请求失败
                })
                //搜索商品的数据请求
		 $api.SearchGoodsListApi()
                .then(res => {
                   //请求成功
                   console.log(res.data);

                })
                .catch(err => {
                   //请求失败
                })
         
    },
    })

请求成功，返回的数据

上面我所使用的接口真实有效，没有接口的小伙伴可以使用此接口测试，封装的api是否报错