微信小程序接口的二次封装

主要思路:
在这里插入图片描述
实现接口的拼接:分为 ‘ 固定接口 ’拼接和‘ 随意接口 ’拼接
如何实现接口的拼接:分为三次拼接:
1.创建一个env.js,里面写自己前面默认的接口地址,可以定义一些配置其他环境的接口
eg:baseUrl:“https://api.it120.cc”
2.创建一个request.js,可以在里面设置一些自己默认配置的一截
eg:const subName = ‘随意设置的,看需求是啥样的’
let _url = ${baseUrl}/${isDoMain?subName:''}${url}
3.创建一个api接口,在里面拼接前面的接口,并且添加公司所给的接口地 址,并且在这个文件里面可以接受传递过来的参数
eg:// 商品列表
getList:()=>{
return request("/shop/goods/list","",{},true)
},
主要代码如下:
env.js

module.exports={
   //开发环境url
   dev:{
    baseUrl:"http://localhost:3000"
  },
  //测试环境得url
  test:{
    baseUrl:"http://www.test.com"
  },
  // 线上环境url
  prod:{
    baseUrl:"https://api.it120.cc"
  }
}

request.js

const {baseUrl} = require("./env").prod
const subName = '随意配置的'
module.exports={
  request:(url,method="GET",data={},isDoMain)=>{
    wx.showLoading()
    let _url = `${baseUrl}/${isDoMain?subName:''}${url}`
    return new Promise((resolve,reject)=>{   
      wx.request({
        url: _url,
        data:data,
        method:method,
        header:{
          'content-type':'application/x-www-form-urlencoded'
        },
        success:res=>{      
          let {code} = res.data           
           if(code===0||code===700){
             resolve(res);
             wx.hideLoading()
           }else{
             wx.showToast({
               title: '请先登录',
               icon:'none'
             })        
          }
        },
        fail:res=>{
          reject('接口有误请检查')
        }
      })
    })
  }
}

api.js 配置接口的主要文件

const {request} = require("./request")
module.exports={
  // 商品列表
   getList:()=>{
      return request("/shop/goods/list","",{},true)
    },
    // 详情页
  getDetail:(id)=>{
    return request("/shop/goods/detail","",{id},true)  // 需要传递参数的
  },
  }

怎么调用?

const {getList,getDetaill} = require("../../http/api")

如何使用?

getList().then((res)=>{
       console.log(res.data.data)   // 获取的数据
      this.setData({
           list:res.data.data
       })   // 把获取到的数据进行更新
     })

传参?
eg: let token=wx.getStorageSync(‘token’)
getList(token).then((res)=>{})
在调用方法的时候传递参数,在api.js文件里面进行接受

对于微信小程序的网络请求,可以使用微信官方提供的 wx.request 方法来实现。如果你希望封装一个类似 Axios 的网络请求库,可以按照以下步骤进行: 1. 创建一个封装的网络请求类,例如命名为 Axios。 2. 在 Axios 类中创建一个方法,例如命名为 request,用于发送网络请求。 3. 在 request 方法中,使用 wx.request 方法发送网络请求,并返回一个 Promise 对象以便进行异步处理。 4. 在 Promise 的 resolve 中返回请求成功的结果,reject 中返回请求失败的原因。 5. 在 Axios 类中可以添加其他常用的方法,例如 get、post、put、delete 等,根据不同的请求类型调用 request 方法发送请求。 6. 在微信小程序的页面中引入 Axios 类,通过调用 Axios 类的方法来发送网络请求。 下面是一个简单的示例代码: ```javascript class Axios { static request(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: options.method || 'GET', data: options.data || {}, header: options.header || {}, success: res => { resolve(res.data); }, fail: error => { reject(error); } }); }); } static get(url, data, header) { return this.request({ url, data, header, method: 'GET' }); } static post(url, data, header) { return this.request({ url, data, header, method: 'POST' }); } // 其他常用方法... } // 在页面中使用 Axios.get('https://api.example.com/data') .then(res => { console.log(res); }) .catch(error => { console.error(error); }); ``` 通过以上封装,你可以像使用 Axios 一样使用 Axios 类发送网络请求。自然地,你可以根据实际需求对该网络请求库进行扩展和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值