uniapp中request添加请求拦截和响应拦截

在uniapp中，可以通过在main.js文件中配置全局的请求拦截器和响应拦截器来实现对所有网络请求的拦截。

首先，我们需要引入uni的请求库：

import Vue from 'vue'
import App from './App'
import request from '@/common/request.js'

Vue.config.productionTip = false

Vue.prototype.$http = request

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

然后，在request.js文件中定义请求拦截器和响应拦截器：

import Vue from 'vue'
import { baseUrl } from '@/common/config.js'

const request = (options) => {
  // 发送请求前的拦截器
  uni.showLoading({
    title: '加载中...'
  })

  // 统一的请求地址
  options.url = baseUrl + options.url

  // 统一设置请求头
  options.header = {
    'Content-Type': 'application/json;charset=UTF-8',
    ...options.header
  }

  return new Promise((resolve, reject) => {
    uni.request({
      ...options,
      success: (res) => {
        // 请求成功的响应拦截器
        uni.hideLoading()
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: (err) => {
        // 请求失败的响应拦截器
        uni.hideLoading()
        reject(err)
      }
    })
  })
}

Vue.prototype.$http = request

export default request

这段代码中，我们在request函数中定义了请求拦截器和响应拦截器，请求拦截器中我们可以对请求进行统一处理，例如添加请求头等操作；响应拦截器中我们可以对返回的结果进行统一处理，例如对状态码进行判断等操作。

需要注意的是，如果请求失败，也需要触发响应拦截器中的reject方法，并将错误信息传递给该方法。

这样，我们就可以在uniapp中实现请求拦截和响应拦截了。