애플릿의 네트워크 요청 봉인

우리의 전방 개발은 대상을 향한 사상을 가지고 자신이 쓴 프로그램을 더욱 간단명료하게 하고 코드에 너무 많이 융합되지 않도록 해야 하기 때문에 여기서 봉인된 사상을 언급했다.
이전 항목에서는 네트워크 요청을 호출할 때마다 비슷한 코드가 호출되었습니다.

//    
  requestData() {
    var that = this
    if (that.data.listData.length < 1) {
      wx.showToast({
        title: '   ',
        duration: 500
      })
    } else {
      wx.showNavigationBarLoading()
    }
    wx.request({
      url: app.globalData.webUrl+"serviceAction/getStoreList.do",
      data: {
        longitude: app.globalData.longitude,
        latitude: app.globalData.latitude,
        city: "  ",
        page: this.data.pageNum,
        pagesize: 10,
        userId: 38971,
      },
      method: "POST",
      "Content-Type": "application/x-www-form-urlencoded",
      success: function (res) {
        wx.stopPullDownRefresh()
        if (that.data.pageNum == 1) {
          that.data.listData = []//    
        }
        var list = [];
        var imgUrl = [];
        var url = "http://yijiao.oss-cn-qingdao.aliyuncs.com/";
        for (var i = 0; i < res.data.content.length; i++) {
          list.push(res.data.content[i]);
          imgUrl.push(url + res.data.content[i].mainImgUrl)
          console.log("    " + res.data.content[i])
        }
        that.setData({
          listData: list,//    
          imageUrl: imgUrl
        })
      },
      fail: function () {
        wx.showModal({
          title: '    ',
          showCancel: false
        })
      },
      complete: function () {
        wx.hideToast()
        wx.hideNavigationBarLoading()
      }
    })
  }

매번 인터넷에서 데이터를 얻는 것과 관련된 것만 있으면 이런 불필요한 코드가 나타날 수 있다. 이전에는 익숙하지 않았고 봉인을 하지 않았다. 지금은 프로젝트를 하나 했고 많은 사상을 알게 되었고 대체를 이해했다. 간단한 호출을 하고 싶어서 나중에 어떤 인터페이스를 찾는 간소화도 편리하다.
1. 우리는 공공 방법을util에 쓴다.j 중util.js 코드:

var webUrl = "https://www.jiaodutong.com/";
//      
function getWebDataWithPostOrGet(model){
  wx.request({
    url: webUrl +model.url ,
    data:model.param,
    header: {
      "Content-Type": "application/json"
    },
    method: model.method,
    success: function (res){
      model.success(res.data)
    },
    fail: function(res){
      wx.showModal({
        title: res,
        showCancel: false
      })
    }
  })
}
//     
module.exports = { getWebDataWithPostOrGet: getWebDataWithPostOrGet
}

그런 다음 프런트엔드 호출을 통해 다음을 수행할 수 있습니다.

var utils = require('../../utils/util.js')
var webData = {
       "longitude": app.globalData.longitude,
         "latitude": app.globalData.latitude,
          "city": "  ",
          "page": 0,
           "pagesize": 10,
           "userId": 38971
      }
    utils.getWebDataWithPost({
      url: utils.bigUrl ,
      param: webData,
      method: "POST",
      success:function (data){
        console.log(data.content[0].mainImgUrl);
      }
    })

내가 전에 쓴 "Content-Type": "응용 프로그램/x-www-form-urlencoded"에서 오류가 발생했습니다
 
잘못
인터페이스 자체는 문제가 없지만 400에 접근할 수 없습니다. 헤더의 문제일 수도 있다는 생각에 문서를 보십시오.
 
20170329160326213.jpg
"Content-Type": "응용 프로그램/json"으로 변경하여 데이터를 정확하게 되돌려줍니다.
몇 가지 주의해야 할 점이 있다.일반적으로 자신이 쓴 인터페이스를 자신에게 사용할 때method 방법이나 헤더가 약속되어 있기 때문에 반복해서 쓰지 않아도 됩니다. 에util에는 고정된 형식으로 쓰여 있습니다.
2.fail 리셋 방법도 통일적으로 처리할 수 있다.더욱이 success 리셋에서 코드 값에 대해 특정한 오류 코드를 통일적으로 처리할 수 있다. 예를 들어 로그인 페이지를 뛰어넘는 등이다.예를 들어 아래의 코드는 더욱 완벽하다.

if(res.data.code==0)
      {
        model.success(res.data)
      }

3. 만약에 모든 인터페이스가 매개 변수로 간주된다면 프로젝트가 커지면 인터페이스가 특히 많고 찾기가 불편하면 공공 인터페이스 종류를 쓸 수 있다. 한 가지 주의해야 할 것은 노출 변수와 노출 방법이 서로 다르다는 것이다. 예를 들어 url.js 코드

//      
var bigUrl = "serviceAction/getStoreList.do";

//      
var projectList = "serviceAction/getItemsByStoreId.do"

//    
module.exports = {
  bigUrl,
  projectList
}