美文网首页
Vue 网络请求封装

Vue 网络请求封装

作者: 艾特五三 | 来源:发表于2020-01-13 16:51 被阅读0次
    1.本片是最基础的网络请求封装: 将header,以及 onSuccess,和 onFail 封装。 只需要将url,以及请求体传入即可如下:参考
    /**
     * 请求头:根据需要自行加参数
     */
    var header = {
      'Cookie': wx.getStorageSync('cookieKey'),
      'version': '1.0.0'
    }
    
    /**
     * 供外部post请求调用  
     */
    function post(url, params, onSuccess, onFailed) {
      console.log("请求方式:", "POST")
      request(url, params, "POST", onSuccess, onFailed);
    
    }
    
    /**
     * 供外部get请求调用
     */
    function get(url, params, onSuccess, onFailed) {
      console.log("请求方式:", "GET")
      request(url, params, "GET", onSuccess, onFailed);
    }
    
    /**
     * function: 封装网络请求
     * @url URL地址
     * @params 请求参数
     * @method 请求方式:GET/POST
     * @onSuccess 成功回调
     * @onFailed  失败回调
     */
    
    function request(url, params, method, onSuccess, onFailed) {
      console.log('请求url:' + url);
      wx.showLoading({
        title: "正在加载中...",
      })
      console.log("请求头:", header)
      
      if('' == params){
          wx.request({
            url: url,
            method: method,
            header: header,
            success: function(res) {
              wx.hideLoading();
              console.log('响应:', res.data);
          
              if (res.data) {
                /** start 根据需求 接口的返回状态码进行处理 */
                if (res.data.code == 1) {
                  onSuccess(res.data); //request success
                } else {
                  onFailed(res.data.message); //request failed
                }
                /** end 处理结束*/
              }
            },
            fail: function(error) {
              onFailed(""); //failure for other reasons
            }
          })
      }else{
          wx.request({
            url: url,
            data: dealParams(params),
            method: method,
            header: header,
            success: function(res) {
              wx.hideLoading();
              console.log('响应:', res.data);
          
              if (res.data) {
                /** start 根据需求 接口的返回状态码进行处理 */
                if (res.data.code == 1) {
                  onSuccess(res.data); //request success
                } else {
                  onFailed(res.data.message); //request failed
                }
                /** end 处理结束*/
              }
            },
            fail: function(error) {
              onFailed(""); //failure for other reasons
            }
          })
      }
     
    }
    
    /**
     * function: 根据需求处理请求参数:添加固定参数配置等
     * @params 请求参数
     */
    function dealParams(params) {
      console.log("请求参数:", params)
      return params;
    }
    
    
    // 1.通过module.exports方式提供给外部调用
    module.exports = {
      postRequest: post,
      getRequest: get
    }
    
    2. 以上写了两种请求方式,GET和POST。通过此方法,将post,get方法 供给外部调用
    image.png
    3. 外部调用

    在<Script> 中引用 var requestTask = require('../../data/utils.js');


    image.png

    调用方法:

    var self = this;
    requestTask.postRequest(self.GLOBAL.baseUrl + 'nhservice/xxx',self.requestBody,
                      function(res){
                          console.log(res);
                          self.toMainHome();
                      },function(err){
                          console.log(err);
                         uni.showToast({
                            title: err,
                            icon:'none'
                          })
                      });
    
    大功告成

    相关文章

      网友评论

          本文标题:Vue 网络请求封装

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