美文网首页
小程序封装请求方法

小程序封装请求方法

作者: 子语喵 | 来源:发表于2019-03-07 10:18 被阅读0次

前言:

当我们在做小程序时,一个项目下来,会有很多次请求接口。每次都重新写肯定会麻烦。
所以要封装出一个公用的方法。进行调用传值即可。

1.单独创建一个api文件,里面放置一个api.js 用于放置接口地址,和公用请求方法;
2.在api.js里面-配置路径

  const app = getApp();

  const basePath = 'https://www.**********';

  //配置路径
  const urlList = {
     wxlogin: basePath + 'Login/WxLogin', //登录
  };

3.封装请求
Promise详细用法,请参考 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

  // 封装请求方法
const request = (url, method, options) => {
    return new Promise((resolve, reject) => {
        wx.request({
            url: url,  //请求地址
            method: method, // GET POSt
            dataType: 'json',
            data: options.data, //数据参数 
            header: {
                "Content-Type": options.method === 'GET' ? "application/json" : "application/x-www-form-urlencoded"  //区分请求头
            },
            success(request) {
                resolve(request.data);  //成功返回的函数
                wx.hideLoading(); //请求成功后 loading隐藏
            },
            fail(error) {
                reject(error.data);  //失败返回的函数
                wx.hideLoading(); //请求成功后 loading隐藏
            }
        })
    });
};

const get = (url, method, options = {}) => { //创建get请求方法
    return request(url, 'GET', { data: options })  
}

const post = (url, method, options = {}) => { //创建post请求方法
    return request(url, 'POST', { data: options })
};

4.暴露出这个方法

  module.exports = {
    get,
    post,
    urlList,
  }

5.要在在调用的页面上引入api.js ,然后在调用方法(根据自己的路径)

  import api from '../../api/api.js';
  
  var db = {
      //参数
   };

  wx.showLoading({
      title: '*****',
  });

  api.post(api.urlList.wxlogin, 'POST', db).then(res => {

      if (res.code === 1) {

      } else {

      };

  }).catch(err => {
      wx.showToast({
          title: err.msg,
          icon: 'none'
      })
  })

这样的话,就大功告成啦。欢迎大家来指点!

相关文章

网友评论

      本文标题:小程序封装请求方法

      本文链接:https://www.haomeiwen.com/subject/rnbqpqtx.html