小程序 api 请求数据方式封装

api-service.js

import { of } from 'rxjs'
import rxwx from 'rxjs6-wx'
import environment from '../environment'
import store from '../store'

// 假数据
import user from '../fixtures/user'

export default class ApiService {
  constructor() {
    this.baseUrl = environment.api_endpoint
  }

  get(url) {
    return this._buildHttpRequest(url, 'GET')
  }

  post(url, data = null) {
    return this._buildHttpRequest(url, 'POST', data)
  }

  put(url, data = null) {
    return this._buildHttpRequest(url, 'PUT', data)
  }

  delete(url) {
    return this._buildHttpRequest(url, 'DELETE')
  }

  // 构建请求
  _buildHttpRequest(url, method, data = null) {

    const requestOptions = {
      url,
      method,
      data,
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-Source': 'miniprogram',  // 告诉后端请求来自小程序

        // 有 token 的话就塞进来
        ...(store.state.auth ? {
          'Authorization': store.state.auth.token,
        } : {}),
      },
    }

    // 小程序 to Observable 风格, 使用 rxjs, 推荐风格
    return new Observable(subscriber => {
      wx.request({
        ...requestOptions,
        success: res => {
          subscriber.next(response.data)
        },
        fail: (error) => {
          subscriber.error(err)
        },
        complete: () => {
          subscriber.complete()
        }
      })
    }).pipe(
      map(this.extractData),
      catchError(this.handleError),
    )

    // 小程序 to Observable 风格, 使用 rxjs6-wx
    return rxwx.request(requestOptions).pipe(
      operators.map(this.extractData),
      operators.catchError(this.handleError)
    )

    // 小程序 to Promise 风格
    return new Promise((resolve, reject) => {
      wx.request({
        ...requestOptions,
        success: res => {
          // 成功
          // console.log('handleSuccess', res)
          if (res.data && res.data.status) {
            resolve(res.data.data)
            return
          }

          // 出错, 后端抛来错误信息, 小程序始终会给出 res.data
          reject(Error(
            res.data.message
              ? res.data.message
              : '网络错误(1)',
          ))
        },
        fail: (error) => {
          // 出错, 请求没发到服务器
          console.log('handleError:', error)
          reject(Error('网络错误(2)'))
        },
      })
    })
  }

  // 根据 api 数据样式处理
  extractData() {
    // 成功
    // console.log('handleSuccess', res)
    if (res.data && res.data.status) {
      return res.data.data
    }

    // 出错, 后端抛来错误信息, 小程序始终会给出 res.data
    throw Error(
      res.data.message
        ? res.data.message
        : '网络错误(1)',
    )
  }

  // 根据 api 数据样式处理
  handleError() {
    // 出错, 请求没发到服务器
    console.log('handleError:', error)
    throw Error('网络错误(2)')
  }

  // 这样使用, 获取用户
  getUser() {
    return of(user) // 假数据
    return this.get(`${this.baseUrl}/user`)
  }

}