【RuoYi移动端】Api与后台数据交互示例

一、utils文件夹中的request.js

import store from '@/store' // 引入store对象
import config from '@/config' // 引入配置文件
import { getToken } from '@/utils/auth' // 引入获取token的函数
import errorCode from '@/utils/errorCode' // 引入错误码映射表
import { toast, showConfirm, tansParams } from '@/utils/common' // 引入通用函数

let timeout = 10000 // 设置默认超时时间为10000ms
const baseUrl = config.baseUrl // 获取基础URL

const request = config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  // get请求映射params参数
  if (config.params) {
    let url = config.url + '?' + tansParams(config.params)
    url = url.slice(0, -1)
    config.url = url
  }
  
  console.log("========== 请求头 ==========");
  console.log(config.header);
  
  return new Promise((resolve, reject) => {
    uni.request({
      method: config.method || 'get', // 请求方法，默认为get
      timeout: config.timeout || timeout, // 请求超时时间
      url: config.baseUrl || baseUrl + config.url, // 请求的完整URL
      data: config.data, // 请求的数据
      header: config.header, // 请求头
      dataType: 'json' // 返回的数据类型
    }).then(response => {
      let [error, res] = response // 解构出响应的错误和数据
      if (error) {
        toast('后端接口连接异常') // 显示提示信息
        reject('后端接口连接异常') // 返回错误信息
        return
      }

      const code = res.data.code || 200 // 获取响应状态码，默认为200
      const msg = errorCode[code] || res.data.msg || errorCode['default'] // 获取响应消息，默认为错误码映射表中的default值
      if (code === 401) {
        showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => { // 显示确认对话框
          if (res.confirm) {
            store.dispatch('LogOut').then(res => { // 调用store中的LogOut方法退出登录
              uni.reLaunch({ url: '/pages/login' }) // 重新加载登录页面
            })
          }
        })
        reject('无效的会话，或者会话已过期，请重新登录。') // 返回错误信息
      } else if (code === 500) {
        toast(msg) // 显示错误信息
        reject('500') // 返回错误信息
      } else if (code !== 200) {
        toast(msg) // 显示错误信息
        reject(code) // 返回错误码
      }
      resolve(res.data) // 返回响应数据
    })
    .catch(error => {
      let { message } = error // 解构出错误消息
      if (message === 'Network Error') {
        message = '后端接口连接异常'
      } else if (message.includes('timeout')) {
        message = '系统接口请求超时'
      } else if (message.includes('Request failed with status code')) {
        message = '系统接口' + message.substr(message.length - 3) + '异常'
      }
      toast(message) // 显示错误信息
      reject(error) // 返回错误
    })
  })
}

export default request

二、api文件夹下添加pd.js

import request from '@/utils/request'

// 登录方法
// export function login(username, password, code, uuid) {
export function pd() {
  console.log("pd.js");
  const data = {}; // 后台api传参数
  return request({
   'url': '/Business/GoodsInventoryDetail/UserDtl',  // api地址
    headers: {
      isToken: true  // 是否难证token
    },
    'method': 'post',
    'data': data  // 后台api传参数
  })
}

三、vue文件中的调用事件

1、html

	
         获取后台数据
    

2、js