微信小程序封装api接口（request和uploadFile）

曾经终败给现在 2023-01-13 04:21 156阅读 0赞

### 微信小程序封装api接口（request和uploadFile） ###

*   *   *  1. 在pages同级的目录下新建一个api文件夹，并新建一个env.js文件
         *  2. 编写request.js文件
         *  3. 编写api.js
         *  4. 调用方法

为了方便对微信小程序对请求的管理，同时减少代码的冗余  
下面是具体的封装方法：

### 1. 在pages同级的目录下新建一个api文件夹，并新建一个env.js文件 ###

env.js文件名字可以换，用于设置公共访问url，即环境地址

//设置公共访问url，即环境地址 
    //commonJS写法--node采用就是该规范 引入require
    module.exports={ 
      //开发环境
      dev:{ 
        baseUrl:"http://localhost:8080",
        oBaseUrl:"http://localhost:8080"  
      },
      //测试环境
      test:{ 
        baseUrl:"http://192.168.1.9:8080",
        oBaseUrl:"http://192.168.1.52:8080"  
      },
      //线上url
      prod:{ 
        baseUrl:"https://www.baudu.com:8080",
        oBaseUrl:"http://www.baudu.com:8080"  
      }
    }

### 2. 编写request.js文件 ###

request.js文件用于二次封装wx.request和二次封装wx.uploadFile

const { oBaseUrl,baseUrl}=require('./env.js').test
    // 专用域名
    const subDomain='';
    const oSubDomain='';
    
    module.exports={ 
      // 二次封装wx.request 
      // {String }url:请求的接口地址 
      // {String} method:请求方式 GET,POST.... 
      // {Object} data:要传递的参数 
      // { boolean }isSubDomain:表示是否添加二级子域名 true代表添加,false代表不添加 
      //二次封装wx.request
      request:(url,method,data,isSubDomain)=>{ 
        return new Promise((resolve,reject)=>{ 
    
          // 拼接
          let _url=`${ baseUrl}/${ isSubDomain?subDomain:''}${ url}`;
          // console.log(_url)
          wx.request({ 
            url:_url,
            data:data,
            method:method,
            header:{ 
              'content-type':' application/x-www-form-urlencoded'
            },
            success:res=>{ 
              resolve(res.data)
            }
          })
        })
      },
    
    
        // 二次封装wx.uploadFile 
      // {String }url:请求的接口地址 
      // {String} filePath:请求方式的本地文件路径（可以是微信的临时路径）
      // {String} name: 获取图片二进制文件的key
      // {Object} formData: HTTP 请求中其他额外的 form data（选） 
      // { boolean }isSubDomain:表示是否添加二级子域名 true代表添加,false代表不添加 
      //二次封装wx.uploadFile 
      uploadFile:(url,filePath,name,formData,isSubDomain)=>{ 
        return new Promise((resolve,reject)=>{ 
    
          // 拼接
          let _url=`${ oBaseUrl}/${ isSubDomain?oSubDomain:''}${ url}`;
          // console.log(_url)
          wx.uploadFile({ 
            url:_url,
            filePath:filePath,
            name:name,
            formData:formData,
            header:{ 
              // 微信wx.uploadFile默认
              'content-type':' multipart/form-data'
            },
            success:res=>{ 
              resolve(res.data)
            }
          })
        })
      }
    }

### 3. 编写api.js ###

api.js是第三层封装，也是要调用这个来请求

const { request}=require('./request.js');
    const { uploadFile}=require('./request.js');
    // 基于业务封装的数据请求
    module.exports={ 
    // 例如: 封装获取所有人物的列表
      findAllHistoryHero:()=>{ 
        // console.log("获取所有人物的列表方法")
        return request("figure/find_all","GET",{ },true);
      },
        //图片识别方法
      imageIdentification:(filePath,name,formData)=>{ 
        return uploadFile('api/sampleSearch',filePath,name,formData,true);
      }
    }

### 4. 调用方法 ###

const { findAllHistoryHero}=require('../../api/api.js');
    //引用我们要调用的方法
    
    findAllHistoryHero().then(res=>{ 
          console.log(res.data)
          this.setData({ 
            personList:res.data,
            heroList:this.dataProcess(res.data)
          })
        })

请求成功，uploadFile也是差不多这样请求。  
![在这里插入图片描述][20210415223351739.png]

[20210415223351739.png]: /images/20221022/4aa89c1f561442ab9c7b73893b683b24.png