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

小程序封装请求方法

作者: 子语喵 | 来源:发表于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