微信小程序请求的封装及跨域的解决。

  • Post author:
  • Post category:小程序


我这个是把所有请求都抽离到不同页面对应的js文件中,可以方便后期的修改和排查问题。


第一步:新建api文件夹并创建config.js文件配置公共信息

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


第二步:在api中创建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)
        // 失败回调
      }
    })
  })
}


第三步:建立对应的js文件,配置单个请求文件

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


第四步:在需要的页面引入request.js就可以使用了

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

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

第五步:跨域的配置,打上对勾即可!

都看到这里里啦,有用就收藏,顺便点一个赞呗



版权声明:本文为Time_Flies_lei原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。