异步请求

IBPS 平台 使用 axios 作为异步请求工具,并做了一些封装。

axios 地址
Github https://github.com/axios/axios
npm https://www.npmjs.com/package/axios
中文文档 https://www.kancloud.cn/yunye/axios/234845

介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 能转换请求和响应数据
  • 能取消请求
  • 自动转换JSON数据
  • 浏览器端支持防止CSRF(跨站请求伪造)

浏览器支持

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔

使用方式

axios 默认的使用方式在这里不做介绍,D2Admin 推荐在您的项目中使用下面的方式获取数据:

设置接口地址

区分不同环境设置接口地址

开发环境

如果您希望不同的环境使用不同的请求地址,可以在 ibps-admin-ui/.env.development 中添加设置(示例):

# 开发环境
VUE_APP_BASE_API = 'http://192.168.3.220:5100/ibps'
VUE_APP_BASE_WEBSOCKET_API = 'ws://192.168.3.220:15888'

这样您在开发环境和正式环境就有了不同的公共请求地址,在开发环境访问 /demo/a 时实际去访问 /ibps/demo/a

生产环境

如果您希望不同的环境使用不同的请求地址,可以在 ibps-admin-ui/.env.development 中添加设置(示例):

# 生产环境
VUE_APP_BASE_API = 'http://www.bpmhome.cn:15100/ibps'
VUE_APP_BASE_WEBSOCKET_API = 'ws://www.bpmhome.cn:15888'

这样您在开发环境和正式环境就有了不同的公共请求地址,在开发环境访问 /demo/a 时实际去访问 /ibps/demo/a

通用配置

您在开始使用 IBPS平台 开发您的项目之前,应该首先修改 src/utils/request.js 下的设置。

默认的设置需要遵循下面的数据返回格式约定:

响应码
响应格式

{
  // 和后台约定的状态码
  state: 200,
  // 后台返回请求状态信息
  message: '返回信息',
   // 后台返回错误的原因
  cause:'后台返回错误的原因',
   // 后台返回变量
  variables:{},
  // data 内才是真正的返回数据
  data: {
    dataResult: [
      ...
    ],
    pageResult:{
      limit: 20,
      page: 1,
      totalCount: 20,
      totalPages: 1
    }
  }
}

在响应拦截器中处理完数据后将会返回:

{
   dataResult: [
      ...
    ],
    pageResult:{
      limit: 20,
      page: 1,
      totalCount: 20,
      totalPages: 1
    }
}

业务错误

当发生错误时返回的数据示例:

{
  // 和后台约定的状态码
  state: 6020301,
  // 后台返回请求状态信息
  message: 'token 过期'
}

如果针对某个错误指定处理方法,应该在响应拦截器中加入对应的代码:

service.interceptors.response.use(
  response => {
    // 成功返回数据,在这里判断和后台约定的状态标识
  }
)

http 错误

如果需要针对某个 http 错误指定处理方法,应该在响应拦截器中第二个参数中添加对应的代码。

service.interceptors.response.use(
  response => {},
  error => {
    // 发生 http 错误,在这里判断状态码
  }
)

不返回 state

在默认的设置中,如果您的接口没有返回 state 字段,将不会进行状态(非 http 状态,而是和后台约定好的状态类型)判断,直接返回 axios 请求返回的数据。
例如:附件下载
response.config.responseType === 'arraybuffer'

状态码下面,自己处理异常

 WARNING: 2, // 警告,需自己处理异常
UNSUPORT: 501, // 功能未实现或者功能未开启

例如接口返回如下数据:

{
  list: [
    ...
  ]
}

在响应拦截器中判断该接口没有返回 state 字段,将会直接将返回:

{
  list: [
    ...
  ]
}

实际用例

设计 API

假设您有一个返回数据的 API 接口,想访问它,您首先应该在 ibps-admin-ui/src/api 文件夹内创建合适的文件目录,例如:ibps-admin-ui/src/api/demo/list.js,这个文件中应该导出一个或者多个请求:

import request from '@/utils/request'

/**
 * 查询列表数据
 * @param {*} params
 */
export function queryPageList(params) {
  return request({
    url: '/demo/list/listJson',
    method: 'post',
    data: params
  })
}

使用 API 获取数据

在上面的步骤中创建了 API 文件,您应该在页面中这样使用:

<script>
import { queryPageList } from '@/api/demo/list'
...
export default {
  methods: {
    /**
     * 加载数据
     */
    loadData() {
      this.loading = true
      queryPageList(this.getFormatParams()).then(response => {
        // 返回数据处理
        ActionUtils.handleListData(this, response.data)
        this.loading = false
      }).catch(() => {
       // 异常情况
        this.loading = false
      })
    },
    /**
     * 获取格式化参数
     */
    getFormatParams() {
      let formParams = {}
      if (this.$refs['crud']) {
        formParams = this.$refs['crud'].getSearcFormData() || {}
      }
      // 和分页数据合并
      return ActionUtils.formatParams(formParams, this.pagination, this.sorts)
    }
    .....
  }
}
</script>

而不是在页面中直接调用 axios。

tip
虽然没有强制规定,请注意您的 API 文件夹结构规律性

模拟数据

详见 插件 | 模拟数据

跨域问题

如果您的前端项目和后端接口发生跨域,可以在本地配置代理:

devServer: {
  proxy: {
    '/api': {
      target: 'http://192.168.3.230/your-path/api',
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

详见 跨域问题解决方案

上述配置的结果是在请求 /api/login 时转发到 http://192.168.3.230/【your-path】/api/login。更多文档见 Vue CLI 3 | devServer.proxy

文档更新时间: 2019-11-29 09:51   作者:hugh