学习记录
微信小程序简单封装api请求,接口管理
首先打开 app.js 文件写全局方法/*obj:{ url:true,//bool类型 定义了两个baseurl,使用这个参数来进行切换 path:path,//接口地址 这里的接口地址是个字符串,定义在urls.js里面的key(具体往下看) methods:"get",//请求方式 可选(默认get) params:{},//传递给接口的参数 success:(res)=>{},//成功回调 fail:(err)=>{},//失败
2020-10-23 04:50:27
357
                <p>首先打开 <strong>app.js</strong> 文件写全局方法</p> 
/*
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

个人网站:点击进入