初步上手小程序笔记1:单独封装axios请求及测试获得文章数据
发布于 3 年前 作者 juan38 1710 次浏览 来自 分享

小程序自身有单独请求的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合法域名列表中,后来查看文档发现需要进行服务器域名的配置,但在小程序工具里找了好久没有发现服务器域名配置,就先采用了一个简单粗暴的方式:

这里在小程序开发工具点击详情部分,勾选如图所示选项

但这并不是长久之计,之后还是需要去配置服务器域名,顺便想问下社区的大佬这个配置在哪里我好像一直都找不到😂

2 回复

不错不错,封装axios方面讲的很简单透彻,赞

不错! 如果再加上请求拦截器、带token进行请求就更好了

回到顶部