③ 小程序request请求封装

使用Promise实现小程序request请求封装

目录

新建service文件夹存放接口文件

1. 配置baseurl
2. 封装request
3. api的集中管理和使用
4. 页面中调用

1.配置baseUrl

新建config.js文件单独维护配置信息

export default {
  baseUrl: 'https://nsrl.e-tecsun.com/data',//测试
  aesKey:"21272c303c3b0687",
  appId: "",
  guestName:"tourist",
  gusetPassword:'123456',
  amapKey: "",//高德地图web服务API的key,
  iconUrl: 'https://nsrl.e-tecsun.com'
}

2.封装request

新建request.js文件

const request = options => {
  return new Promise((resolve, reject) => {
    const { data, method } = options
    if(data && method !== 'get') {
      options.data = JSON.stringify(data)
    }
    wx.request({
      header: {
        'Content-Type': 'application/json'
      },
      ...options,
      success: res => {
        if(res.data.code === 0) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: res => {
        reject(res.data)
      }
    })
  })
}
export default request

3.api的集中管理和使用

在service文件夹下建立api文件夹，并在文件夹下创建user.js文件（文件名推荐按模块命名）

import request from "../request"
import { baseUrl } from "../config"

export function apiLogin(data) {
   return request({
     url: baseUrl + `/user/login`,
     method: 'post',
     data
   })
}
export function apiModifyUserPassword(data) {
   return request({
     url: `${baseUrl}/user/modifyPassword`,
     method: 'put',
     data
   })
}
export function apiLogout() {
   return request({
     url: `${baseUrl}/user/logout`,
     method: 'delete'
   })
}

4.页面中调用

// pages/login/login.js
import { apiLogin } from '../../service/api/user.js'
Page({
  onLoad: function (options) {
    this.login()
  },
  login() {
    apiLogin({
      // api params
    }).then(res => {
      // handle success
    }).catch(error => {
      // handle error
    })
  }
})