微信小程序封装数据请求

目录结构

在根目录下创建request目录及api.js,fetch.js和http.js文件

在fetch.js中用promise对wx.request()进行封装。

//封装
module.exports = (url, path, method, params) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${url}${path}`,
      method: method,
      data: Object.assign({}, params),
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      success: resolve, //返回成功的结果
      fail: reject,  //返回失败的结果
    });
  });
};

在api.js中统一管理url地址

module.exports = {
  "banner": "/wangkai/banner/list", //轮播图
  
}

在http.js

const api = require('./api.js')
const fetch = require('./fetch.js');
//设置一下baseUrl
let baseUrl = 'https://api.it120.cc';

function Get(path, params) {
  return fetch(baseUrl, path, 'get', params);
}

function Post(path, params) {
  return fetch(baseUrl, path, 'post', params);
}

//抛出
module.exports = {
  getBanner(params) {  //轮播图
    return Get(api.banner, params);
  }
}

在全局app.js中导入request

const http=require('./request/http')

App({
  http, 

})

在index.js中

import http from '../../request/http'  //先引入
Page({
  data: {
     
  },
  onLoad: function() {
    this.swiper();
    
  },
  swiper(){//轮播
    http.getBanner().then(res=>{
        console.log(res)
    })
   },
})

然后控制台打印一下,如图：