辉太郎看前端(利用promise封装wx.request())

前言

封装wx.request()，可以让我们在使用时更加方便，减少代码量。

封装步骤

1. 再根目录新建一个env文件夹，在内部新建js文件，配置接口环境。

• 文件图
  
• 在js文件中导出我们配置的接口环境。

module.exports={
     
  //开发模式
  devBaseUrl:"开发环境的域名",
  //测试
  catchBaseUrl:"测试环境的域名",
  //线上
  proBaseUrl:"生产环境的域名"
}

注： 前边的变量名，可以自定义。

2. 在根目录新建http文件夹，在里边创建3个js文件。

• 文件图片
  
• api.js用于封装接口

module.exports={
     
 "接口类名":"接口名称"
}

• fetch.js用于封装wx.request()请求。

module.exports = (url, method, data) => {
     
  let p = new Promise((resolve, reject) => {
     
    wx.request({
     
      url: url,
      method: method,
      data: Object.assign({
     }, data),
      success(res) {
     
        resolve(res)
      },
      fail(err) {
     
        reject(err)
      }
    })
  })
  return p
}

注： url接口地址，method请求方式，data请求参数

• http.js用于请求接口

//导入环境
const evn=require('../env/index.js')
//导入接口文件
const api =require('./api.js')
//导入封装的wx.request()
const fetch = require('./fetch.js')

//确定环境
let baseUrl=evn.devBaseUrl;

//请求接口
function banner(){
     
  return fetch(baseUrl+api.接口别名,'请求方式',{
     请求参数})
}
//导出请求
module.exports={
     
  banner
}

应用到组件中

1. 在app.js中导入http.js。

const http=require('./http/http.js')

2. 在app.js中挂载。

App({
     
  http:http
  })

3. 在组建中创建app实例。

const app = getApp()

4. 就可以在组件中的生命周期函数中使用了。

app.http.导出的封装接口函数名().then((res) => {
     })

总结

初出茅庐，请多多指教。谢谢❤！