bladex前端接收后端传输消息 如何自定义封装wrapper

在BladeX前端框架中，可以使用axios作为HTTP请求的库。要自定义封装wrapper，可以在axios的拦截器中进行配置。

具体步骤如下：

1. 在src/utils/request.js中创建一个axios实例，并导出该实例。

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

export default service

2. 在该实例中设置请求拦截器和响应拦截器，这两个拦截器会在请求发送和响应返回时自动触发。

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理，例如添加token等
    return config
  },
  error => {
    // 处理请求错误
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在响应返回之前做一些处理，例如统一处理错误码等
    const res = response.data
    if (res.code !== 200) {
      // 处理错误码
      console.log(res.msg)
      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 处理响应错误
    console.log('err' + error)
    return Promise.reject(error)
  }
)

export default service

3. 在src/api下定义接口文件，例如demo.js。

import request from '@/utils/request'

export function getDemoList(params) {
  return request({
    url: '/demo/list',
    method: 'get',
    params
  })
}

export function addDemo(data) {
  return request({
    url: '/demo/add',
    method: 'post',
    data
  })
}

4. 在需要使用接口的组件中引入定义好的接口文件，并调用接口。

import { getDemoList, addDemo } from '@/api/demo'

export default {
  data() {
    return {
      demoList: []
    }
  },
  mounted() {
    this.getDemoList()
  },
  methods: {
    getDemoList() {
      getDemoList({}).then(response => {
        this.demoList = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    addDemo() {
      addDemo({}).then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

以上就是在BladeX前端框架中自定义封装wrapper的步骤。通过自定义封装wrapper，可以方便地统一处理请求和响应，在开发过程中提高效率。