Simple encapsulation of wechat applet wx.request

The initiation is provided in the applet https The method of network request wx.request（Object）

Directly in js Use this method in the file       But you still have to use encapsulation for projects

 wx.request({
      url: 'http://www.ibugthree.com/oldcar/searchCar',
      method: 'POST',
      data: {
        page: 1,
        mod: ' BMW '
      },
      header: {
        'pc-token': '4a82b23dbbf3b23fd8aa291076e660ec',
        'Accept': 'application/json'
      },
      success: function (res) {
           console.log(res)
        }
      }
    })

There may be a mistake

To solve this problem is to   details -> Local settings -> Do not verify legal domain name     This can be easily solved But you can't do this in projects in the company , The company will give you legal http domain name

 

The following is wx.request Encapsulation

First, in the pages In the new api The folder is in api New inside http.js and api.js file

http.js

const pubUrl = "http://www.ibugthree.com" // This is the common part of the data interface I want to request 
//options  Is the receive parameter 
const http = (options) => {
  //   I don't know here. You can enter it to have a look 
  // console.log(options)
  return new Promise((resolve, reject) => {
    wx.request({
      //  If you don't know the parameters and how to transmit them, you can options Take a look at the output 
      url: pubUrl + options.url, // Splicing request address   pubUrl It's the public part   options.url Is the address of the requested part 
      method: options.method, //  Type of request received   Into the background 
      data: options.data.page, // Pass in the parameter 
      header: options.header || {
        'Accept': 'application/json',
        'pc-token': '4a82b23dbbf3b23fd8aa291076e660ec', 
      },
      success:resolve,
      fail:reject
    })
  })
}
// Put this http Exposed 
export default http

api.js

import http from './http' // Introduce the request method encapsulated above 

// For more details , Need to pass parameters     No parameters, no transmission  data I don't have to 
const getCarList = (page) => {
  return http({
    url:'/oldcar/searchCar',
    data:{page}, 
    method:'POST' // Request type 
  })
}
//  Export method , Realize reuse 
export default{
  getCarList
  }

The page that needs to request data js file , Such as ：index.js

 

  //  For the method of requesting data promise encapsulation , So we need to cooperate with async  and  await  To get to the promise Data in 
  async onLoad() {
    // Call in the method that needs to request the interface to obtain data api The method in 
    let res = await Api.getCarList({ page:1,mod: ' Mercedes '});
    // Here you can output to see if you have obtained data 
      console.log(res)
    //  Add to array here 
    this.data.carList.push(res.data)
    
  },

So it's sealed , Add it to the array and you will know how to use it