Encapsulate network requests and mock data

Video address: v.qq.com/x/page/i055…

Before starting, please import the code/ directory in ch2-3 branch into wechat development tool


In the previous section, we added the util object to the index.js file and encapsulated many common methods in the object

letUtil = {the log () {... {}, alert ()... {}, getStorageData ()... {}, setStorageData ()... }}Copy the code


In this section, we encapsulate the commonly used network request method wx.request

  let util = {
    // Omit some code here
    request(opt){
      let {url, data, header, method, dataType} = opt
      let self = this
      return new Promise((resolve, reject) = >{
        wx.request({
          url: url,
          data: data,
          header: header,
          method: method,
          dataType: dataType,
          success: function (res) {
            if (res && res.statusCode == 200 && res.data) {
              resolve(res.data);
            } else {
              self.alert('tip', res); reject(res); }},fail: function (err) {
            self.log(err);
            self.alert('tip', err); reject(err); }})})}}Copy the code


For the request parameters, we set the default values, easy to call

  const DEFAULT_REQUEST_OPTIONS = {
    url: ' '.data: {},
    header: {
      "Content-Type": "application/json"
    },
    method: 'GET'.dataType: 'json'
  }

  let util = {
    // Omit some code here
    request (opt){
      let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
      let {url, data, header, method, dataType, mock = false} = options
      let self = this
      // Omit some code here}}Copy the code


For local development debugging, we need to add our mock data and modify util.request

  let util = {
    // Omit some code here
    request (opt){
      let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
      let {url, data, header, method, dataType, mock = false} = options
      let self = this
      return new Promise((resolve, reject) = >{
        if(mock){
          let res = {
            statusCode: 200.data: Mock[url]
          }
          if (res && res.statusCode == 200 && res.data) {
            resolve(res.data);
          } else {
            self.alert('tip', res); reject(res); }}else{
          wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: dataType,
            success: function (res) {
              if (res && res.statusCode == 200 && res.data) {
                resolve(res.data);
              } else {
                self.alert('tip', res); reject(res); }},fail: function (err) {
              self.log(err);
              self.alert('tip', err); reject(err); }})}})}Copy the code

Mock = true: mock = true: mock = true: Mock = true: Mock = true: Mock = true: Mock = true: Mock = true


The call method is as follows:

  util.request({
    url: 'list'.mock: true.data: {
      tag:'Wechat Hot'.start: 1.days: 3.pageSize: 5.langs: 'en'
    }
  }).then(res= > {
    // do something
  })
Copy the code

IKcamp website: www.ikcamp.com

Visit the official website to read all the free sharing courses: iKcamp produced | the latest network | wechat small program | Share the beginner and intermediate training course based on the latest version 1.0 developer tools. Contains: articles, videos, source code

IKcamp’s original new book “Mobile Web Front-end Efficient Development Combat” has been sold on Amazon, JD.com and Dangdang.

IKcamp latest activities

Registration address: www.huodongxing.com/event/54099…

Face-to-face communication with the R&D team that ranked fourth in the total list of “Everyday Speaking” small programs and first in the education category.

In 2019, iKcamp’s original new book Koa and Node.js Development Actual Combat has been sold on JD.com, Tmall, Amazon and Dangdang!