使用promise封装wx.request()

快来打我* 2022-12-09 12:59 165阅读 0赞

### 1.目录结构 ###

在根目录下创建`http`目录及`api.js`文件`fetch.js`以及`http.js`文件；

![在这里插入图片描述][20200922151752850.jpg_pic_center]  
在根目录下创建env目录,创建index.js配置并导出多个开发环境  
![在这里插入图片描述][20200922160017714.jpg_pic_center]

module.exports={ 
      //开发环境
      Dev:{ 
        "BaseUrl":"https://www.develep.com"
      },
      //测试环境
      Test:{ 
        "BaseUrl":"https://www.test.com"
      },
      //生产环境
      Prod:{ 
        "BaseUrl": "https://api.douban.com"
      }
    }

在api.js中统一管理，请求的url地址

module.exports={ 
      "hot":"/v2/movie/in_theaters",
      "top250": "/v2/movie/top250",
      "detail": "v2/movie/subject"
    }

在fetch.js中用promise对wx.request()进行封装

//封装wx.request()网络模块
    module.exports=(url,method,data)=>{ 
      let p=new Promise((resolve,reject)=>{ 
        wx.request({ 
          url: url,
          method:method,
          data:Object.assign({ },data),
          header:{ 'Content-Type': 'application/text' },
          success(res){ 
            resolve(res)
          },
          fail(err){ 
            reject(err)
          }
        })
      })
      return p;
    }

在http.js，根据当前环境，设置相应的`baseUrl`, 引入fetch中封装好的promise请求，封装基础的get\\post\\put\\upload等请求方法，设置请求体，带上token和异常处理等；  
设置对应的方法并导出；

const evn=require('../env/index.js')
    const api=require('./api')
    const fetch = require('./fetch')
    
    
    //确定开发环境
    let baseUrl=evn.devBaseUrl;
    //如果接口需要token鉴权，获取token
    let token=wx.getStorageSync('token');
    
    //轮播请求函数
    function banner(){ 
      return fetch(baseUrl+api.banner,'get',{ })
    }
    //list列表函数
    
    //分类接口函数
    
    module.exports={ 
      banner
    }

在全局app.js中导入http,注册到根组件

const http=require('./http/http.js')
    
    // App.config=config[env];
    App({ 
      http, // http.fetch
    
    })

在具体页面导入,并使用；

//获取应用实例
    const app = getApp();
    Page({ 
      data: { 
       list:[]
      }
    onLoad: function () { 
        app.http.banner().then((res)=>{ 
                    this.setData({ 
                        list: res.data.list
            })    })
    }

[20200922151752850.jpg_pic_center]: /images/20221123/d7c29fb46285443dad7763d43f9dbef7.png
[20200922160017714.jpg_pic_center]: /images/20221123/34221ca70db4456885342414dd1bbaaa.png