小程序自身有单独请求的api,并且已经解决了跨域问题,可以不需要重新配置一下。
这里贴下小程序的请求api代码
新建了一个axios.js文件用于封装axios
//封装axios请求
class Axios {
post(url, data) {
return this.request("POST", url, data)
}
get(url, data) {
return this.request("GET", url, data)
}
put(url, data) {
return this.request("PUT", url, data)
}
update(url, data) {
return this.request("UPDATE", url, data)
}
detete(url, data) {
return this.request("DELETE", url, data)
}
request(method, url, data) {
return new Promise((resolve, reject) => {
wx.request({
url: base_url+url,
method:method,
data:data,
header: {
"content-type": 'application/json'//默认值
},
success(res) {
console.log(res.data);//打印返回的数据
resolve(res.data)
},
fail(err) {
reject(err)
}
})
})
}
}
module.exports = new Axios();//将其暴露出去
这里小程序的暴露方法和react用的export default有所不同,稍微记录一下。
然后新建文件夹,这里我命名为servies,专门用于存放发送请求的js文件,这里新建一个article.js文件,专门用于存放请求文章相关数据的请求
// 请求数据部分
const axios=require("../utils/axios")//引入axios
module.exports={//将请求暴露出去
//获取首页文章信息
getHomeArticle(url,data){
return axios.get(url,{data:data})
}
}
在pages下的index中的index.js引入
const {getHomeArticle} =require("../../servies/article.js");
随后进行引用
onReady: function () {
getHomeArticle(`/article/queryArticleListByNewTime2/FRONTEND/1/10/4`,{});
},
测试的请求接口部分
最后编译运行,在控制台可查看请求结果
其实一开始封装完axios请求后测试请求数据时会出现请求地址不在request合法域名列表中,后来查看文档发现需要进行服务器域名的配置,但在小程序工具里找了好久没有发现服务器域名配置,就先采用了一个简单粗暴的方式:
这里在小程序开发工具点击详情部分,勾选如图所示选项
但这并不是长久之计,之后还是需要去配置服务器域名,顺便想问下社区的大佬这个配置在哪里我好像一直都找不到😂
不错不错,封装axios方面讲的很简单透彻,赞
不错! 如果再加上请求拦截器、带token进行请求就更好了
感谢, 基于大佬的又封装了一层 😊