微信小程序简单封装api请求,接口管理

首先打开 app.js 文件写全局方法

/*
obj:{
    url:true,//bool类型  定义了两个baseurl,使用这个参数来进行切换
    path:path,//接口地址 这里的接口地址是个字符串，定义在urls.js里面的key(具体往下看)
    methods:"get",//请求方式  可选(默认get)
    params:{},//传递给接口的参数
    success:(res)=>{},//成功回调
    fail:(err)=>{},//失败回调
}
*/
api:function(obj){
    //传过来的参数是个对象
    
    let { baseurl1,baseurl2} = this.globalData;//定义两个全局变量，不同的baseurl，自行配制
    let url,methods="get";//声明变量url,默认请求方式为get
    let { params,success,fail } = obj;//参数 和 成功 失败 回调
    if(obj.url) url = baseurl1;//如果参数url是true 使用第一个baseurl
    if(!obj.url) url = baseurl2;//如果参数url是false  使用第二个baseurl
    if(obj.methods) methods = obj.methods;//如果设置了请求方式,就按照设置的来
    let path = urls[obj.path];//获取接口路径  这里的urls是需要引入的,往下看
    url += path;//这里拼接url  如：https://xxx.xxx.com/api/login
    return new Promise((resolve,reject)=>{
      wx.request({
        url: url,//baseurl+地址
        methods:methods,//请求方式
        data:params,//请求参数
        success:function(res){
          resolve(success(res.data))//将成功的结果返回出去
        },
        fail:function(err){
          reject(fail(err))//将失败的原因返回出去
        }
      })
    })
}

在 app.js 下方配置  globalData 

globalData: {
    userInfo: null,
    baseurl1:'https://xxx.xxx.com',
    baseurl2:'https://xxx.xxx.com'
}

现在来写接口统一管理，在根目录下新建 config / urls.js

在 urls.js 里写出接口管理

export default {
  "login":"/api/login",//登录
}

然后在 app.js 引入

import urls from "/config/urls.js";

这时 第一步 的获取接口路径就可以获取到了，第一步里面的 obj 参数里的 path 就可以取到值了

---

具体页面的调用方法

const app = getApp();//获取app实例，必不可少
const { api } = app;//获取封装的请求方法

Page({
    data:{
    },
    test(){//由页面触发的方法
        //请求方法
        api({
            url:true,//切换baseurl(如果只有一个baseurl自行配置)
            path:'login',//urls.js里的key
            methods:'get',//请求方式,默认是get
            params:{//传递参数
                key:value
            },
            success:(res)=>{
                console.log(res)//成功回调
            },
            fail:(err)=>{
                console.log(err)//失败回调
            }
        })
    }
})

只是一个简单的配置，其实做的也就是将 【微信提供的request进行了封装】 ，对 【接口】 进行了 【统一管理】 ，若要做得更细的封装，请自行配置

 

QQ群：1063233592

个人网站：点击进入