小程序-接口请求的简单封装

简介：在使用mpvue开发小程序中(不使用axios请求数据)，会大量的请求数据，这里对请求进行封装

一.在 utils/index.js目录下，进行封装

代码如下：

    所有接口前缀应该都是一样的,不同的只是后面的部分

    const host = "http://localhost:8080/yh" 

    export {host} 

---

 // 请求封装(url只是接口的后半段)

function request(url,method,data,header = {}) { 

     // 请求数据时，会有一个请求loading 

     wx.showLoading({   

             title: "数据请求中"  });  

    return new Promise((resolve, reject) => {    

            wx.request({      

                 url: host + url,     

                 method: method,      

                 data: data,      

                 header: {       

                     "Content-type": "application/json"      

                 },      

                // 接口请求成功      

                success(res) {        

                    wx.hideLoading();       

                     resolve(res.data)     

                 },     

                 fail (error) {        

                      wx.hideLoading()        

                      reject(false)      

                },      

            // 只要请求完成就调用，不管成功或者失败      

                complete() {        

                    wx.hideLoading()     

                 }   

             }) 

         })

    } 

//get请求

export function get(url, data) {  return request(url, 'GET', data)}

export function post(url, data) {  return request(url, 'POST', data)} 

二.调用

比如说在index.vue中使用get请求:

步骤:

1)先在页面中引入

    import { get } from "../../util"

2)接口请求

    async getData() {

        const data = await get('/index/index')

        console.log(data)

    }

注意：在后端需要定义一个http://localhost:8080/yh/index/index 接口

总结:一个简单的小程序数据请求封装，一个努力的前端小菜鸟，加油，每天进步一点点