mpvue中使用flyjs全局拦截的实现代码

mpvue是一个能够基于Vue.js快速开发小程序的框架。与Vue.js类似，mpvue的语法和API几乎与之相同，开发者可以在短时间内熟练掌握其使用。而flyjs是一个优秀的基于Promise的HTTP请求库，能够支持拦截器等高级功能。本文将详细讲解在mpvue中使用flyjs全局拦截的实现代码，以及两个示例说明。

安装和使用flyjs

首先，在mpvue项目根目录下安装flyjs：

npm install flyio -S

在需要的页面或组件中，导入并实例化flyjs：

import Fly from 'flyio/dist/npm/fly'
const fly = new Fly()

全局拦截器

可以在flyjs中配置拦截器，在请求发送前或响应返回前对request（请求）和response（响应）做一些统一处理或判断，这样可以简化部分业务逻辑代码。在mpvue中，我们可以在main.js文件中创建flyio实例并添加全局拦截器：

// main.js文件
import Fly from 'flyio/dist/npm/fly'
const fly = new Fly()

// 添加请求拦截器
fly.interceptors.request.use((request) => {
  // 统一添加请求头
  request.headers['content-type'] = 'application/json'
  // 统一添加请求参数
  request.body = {
    ...request.body,
    version: '1.0.0',
    timestamp: Date.now()
  }
  return request
})

// 添加响应拦截器
fly.interceptors.response.use(
  (response) => {
    // 对响应数据做统一处理
    if (response.data.code !== 0) {
      // 统一处理错误
    }
    return response
  },
  (error) => {
    // 统一处理错误
    return Promise.reject(error)
  }
)

Vue.prototype.$http = fly

其中，request和response分别是请求和响应对象，use()方法需要传递两个回调函数，第一个参数是处理成功的回调函数，第二个参数是处理失败的回调函数，错误请求会在这里被统一处理。

示例一

使用flyjs进行数据请求，实现获取用户信息的功能。

// 示例请求代码（在vue组件中使用）
export default {
  data () {
    return {
      user: {}
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      this.$http.get('https://example.com/api/getUserInfo?id=123')
        .then(response => {
          this.user = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

在以上代码中，通过this.$http.get()方法发送了一个GET请求，请求的URL是https://example.com/api/getUserInfo?id=123，该请求会被拦截器进行请求头和请求参数的统一处理，同时响应数据会被处理成功回调函数所拦截并返回。

示例二

假设我们需要在所有请求中携带token参数，那么我们可以通过在全局拦截器中添加请求头来实现：

// main.js文件
import Fly from 'flyio/dist/npm/fly'
const fly = new Fly()

// 添加请求拦截器
fly.interceptors.request.use((request) => {
  // 统一添加请求头
  request.headers['content-type'] = 'application/json'
  request.headers.Authorization = 'Bearer ' + wx.getStorageSync('token')
  // 统一添加请求参数
  request.body = {
    ...request.body,
    version: '1.0.0',
    timestamp: Date.now()
  }
  return request
})

// 添加响应拦截器
fly.interceptors.response.use(
  (response) => {
    // 对响应数据做统一处理
    if (response.data.code !== 0) {
      // 统一处理错误
    }
    return response
  },
  (error) => {
    // 统一处理错误
    return Promise.reject(error)
  }
)

Vue.prototype.$http = fly

以上代码中，在所有请求的请求头中添加了一个Authorization参数，该参数的值为Bearer加上当前用户的token，我们通过wx.getStorageSync('token')获取当前用户的token值。这样发送的所有请求都会带有token参数。使用方法与上述示例一类似。