微信小程序 wx.request的简单封装

在小程序中提供了发起https网络请求的方法wx.request（Object）

直接在js文件中使用此方法     但是做项目还是得使用封装

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

可能会遇到一个错误

解决这个错误就是在  详情->本地设置->不校验合法域名   这样就可以轻松解决了 但是到公司里面项目中就不能这样弄了，公司里面会给你合法的http域名

 

下面就是wx.request的封装

首先在pages里新建api文件夹在api里面新建http.js和api.js文件

http.js

const pubUrl = "http://www.ibugthree.com" //这是我要请求的数据接口的公共部分
//options 是接收参数
const http = (options) => {
  //  这里不知道可以输入来看一下
  // console.log(options)
  return new Promise((resolve, reject) => {
    wx.request({
      // 如果不知道这里面的参数不知道怎么传可以把options输出看一下
      url: pubUrl + options.url, //拼接请求地址  pubUrl是公共部分  options.url是请求的哪一部的地址
      method: options.method, // 接收的请求类型 传入到后台
      data: options.data.page, //传入参数
      header: options.header || {
        'Accept': 'application/json',
        'pc-token': '4a82b23dbbf3b23fd8aa291076e660ec', 
      },
      success:resolve,
      fail:reject
    })
  })
}
//把这个http暴露出来
export default http

api.js

import http from './http' //引入上面封装好的请求方法

//获取详情，需要传递参数   没有参数就不用传 data也就不用写了
const getCarList = (page) => {
  return http({
    url:'/oldcar/searchCar',
    data:{page}, 
    method:'POST' //请求类型
  })
}
// 将方法导出，实现复用
export default{
  getCarList
  }

需要请求数据的页面的js文件，如：index.js

 

  // 为请求数据的方法用promise封装，所以需要配合async 和 await 来获取到promise中的数据
  async onLoad() {
    //在需要请求接口获取数据的方法中调用api中的方法
    let res = await Api.getCarList({ page:1,mod: '奔驰'});
    //这里可以输出看一下有没有获取到数据
      console.log(res)
    // 这里添加到数组
    this.data.carList.push(res.data)
    
  },

这样就封装好了，添加到数组中大家就知道怎么用了吧