封装wx.request()请求函数

封装wx.request()请求函数

目录可以设置为:

• api
  • api.js
  • config.js
  • http.js

（1）api.js文件

// 接口地址
const api = "/abc" //存放公共的路径

export default {
  loginPassword: api + "/login"
}

（2）config.js文件

const config = {
  header: {},
}
export default config

（3）http.js文件

import config from "./config"

const http = function(params) {
  return new Promise((resolve, reject)=>{
    wx.request({
      ...config,
      ...params,
      success: function(res) {
        resolve(res)
      },
      fail: function(error){
        reject(error)
      }
    })
  })
}
export default http

使用时直接将api.js文件和http.js文件引入到页面的js文件中，直接使用相应的地址和http方法

import http from "../../api/http"
import url from "../../api/api"

// 可以在微信小程序的onload函数中使用
  onLoad: function () {
    http({
      url: url.loginPassword,
      method: 'post'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },

将微信中请求接口的方法封装起来的好处：

• 便于做公共部分的处理，比如需要设置token或者cookie，可以直接放在header中，不必每次请求都添加一遍
• 便于维护，尤其是项目很大，迭代次数很多的时候，不管要用到多少接口，都很清晰。
• 可以统一做接口请求和响应的拦截