小程序封装请求的步骤

Posted 2023-03-16

参考技术A 1.第一步建立http文件夹 再建立http.js

2.第二步封装具体的请求，建立api.js

3.第三步在页面调用接口：

微信小程序封装Promise

我们为什么要分装Promise：因为减少步骤，

   wx.request({         //请求借口
          url: url,  //借口地址
          data:data,    //请求的参数
          method:method,  // 什么请求 git 或者 post
          success:((res)=>{    //success 正确的返回值
            resolove (res)
          }),
          fail:((res)=>{     //fail 错误的返回值
            reject (res)
          })
        })

我们每次都得这样写比较麻烦，所以我们封装一个方法，

第一步、创建一个文件夹跟三个js文件

第二步 pe.js写 封装方法

module.exports=(url,data,method)=>{       //导出  
var p=new Promise((resolove,reject)=>{   // new 一个promise里面写方法
        wx.request({
          url: url,
          data:data,
          method:method,
          success:((res)=>{
            resolove (res)
          }),
          fail:((res)=>{
            reject (res)
          })
        })
})
return p         //封装完以后返回值 promise
}

2.ho.js 里面写 借口地址的集合

module.exports={
  sw:'/home/multidata'
}

3.在pl.js 中 先导入封装的方法跟地址的集合在在写一个基地址，基地址+地址的集合 导出一下

var a=require('./ho')
var b=require("./pe")  //导入二个js文件
var baseUrl="http://123.207.32.32:8000/api/h8"  //基地址
function banner(){                                 
return  b(baseUrl+a.sw,{},'get')           // 返回值基地址+借口集合
，git请求
}

module.exports={
   banner        
}

四、在全局的app.js里面导入基地址+借口合集的js文件

然后在配置

  globalData: {
    userInfo: null
  },
  http:http

五、然后在那个文件里面使用就导入全局的配置文件使用即可

var app=new getApp() 导入去全局文件
在  /**
   * 生命周期函数--监听页面加载
   */ 里面使用
       var ths =this

    app.http.banner().then((res)=>{   //封装后的借口请求
        console.log(res);
        var f=res.data.data.banner.list
        this.setData({  //修改数据
          arr:f
        })
      })
      console.log(app.http);

或者可以看：https://blog.csdn.net/weixin_43638968/article/details/109570018?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162038434816780357280471%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162038434816780357280471&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v29-2-109570018.first_rank_v2_pc_rank_v29&utm_term=%E7%94%B0%E5%85%B4%E5%B0%81%E8%A3%85

或者

https://blog.csdn.net/weixin_43638968/article/details/109570018?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162038434816780357280471%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162038434816780357280471&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v29-2-109570018.first_rank_v2_pc_rank_v29&utm_term=%E7%94%B0%E5%85%B4%E5%B0%81%E8%A3%85

总结步骤：1.在js中用promise对wx.request()进行封装
2.在js中统一管理，请求的url地址
3.在http.js，根据当前环境，设置相应的baseUrl, 引入fetch中封装好的promise请求，封装基础的get\\post\\put\\upload等请求方法，设置请求体，带上token和异常处理等；
设置对应的方法并导出；
4.在全局app.js中导入http,注册到根组件
5.在组件中导入并且使用