失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序wx.request请求封装 和跨域的解决。

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

时间:2022-06-07 19:19:15

相关推荐

微信小程序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',// 传入请求类型默认为getsuccess: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})})

五、跨域的配置,打上对勾即可!

如果觉得《微信小程序wx.request请求封装 和跨域的解决。》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。