微信小程序wx.request请求封装,和跨域的解决。

建议把所有请求抽离到不同页面对应的js文件中，可以方便后期的修改和排查问题，小程序请求是通过微信后台来请求我们的后台地址来进行后端映射、你请求的接口实际到微信的后端做了一道映射，微信后端拿到你的 wx.request 调用的 url、用后端请求后端，所以不会出现跨域问题

一、新建network文件夹并建立netwrok.js文件

import baseURL from "./config.js";
// 引入baseURL 后面会讲到
export default function request(options){
  // options为调用时传入的参数对象
  return new Promise((resolve,reject)=>{
    wx.request({
      header:{
        'pc-token':'4a82b23dbbf3b23fd8aa291076e660ec'
         //定义公共头部信息
      },
      url:baseURL+options.url, 
      // 拼接请求地址
      data:options.data||{},
      // 传入data参数
      method:options.method||'get',
      // 传入请求类型默认为get
      success:function(res){
        resolve(res)
        // 成功回调
      },
      fail:function(res){
        reject(res)
        // 失败回调
      }
    })
  })
}

二、在network中建立config.js文件配置公共信息

const baseURL='http://xxxxxxxxxxx'
// 配置公共地址并暴露
export default baseURL

三、建立对应的js文件，配置单个请求文件

import requset from "./network";
// 引入requset请求
export  function getList(page){
  // 配置当前请求的地址和传入的参数
  return requset({
    url:"/getCarList",
    data:{
      page
    },
    method:'post'
  })
}

四、使用

import {getList} from "../../network/req.js";
// 引入封装好的单个请求

// 调用请求获取数据
getList(1).then((res)=>{
      this.setData({
        list:res.data
      })
  })

 

五、跨域的配置，打上对勾即可！