uniapp | 通用的请求、响应拦截器 | 代码

一、简介

1.本文主要内容

• 主要记录在uniapp课程项目中使用的通用请求拦截器和响应拦截器代码
• 本文第六部分有以登录注册请求接口的完整代码例子

2.文件目录结构

• api文件夹里分别有api.js和request.js
• api接口代码在api.js里
• 通用拦截器代码在request.js里

二、api接口

@/api/api.js

import api from "./request"
export default {
  //获取首页数据 get
  getIndexData(){
    return api.get('./mobile/index')
  }
  //登录 post
  userLogin(data){
    return api.post('./mobile/login',data)
  }
}

三、get和post接口

@/api/request.js

import api from "./request"
export default {
  config:{...}
  get(url, params=null, options={}){
    options.url = url
    options.url += params ?('?'+Objext.keys(params).map(key => key + '=' + params[key]).join('&') : ''
    options.method = 'GET'
    return this.request(options)
  },
  post(url, data = null, options ={}){
    options.url = url
    options.data = data
    options.method = 'POST'
    return this.request(options)
  }
}

四、request

@/api/request.js

export default {
  config:{...}
  request(options){
    return this.config.beforeRequest(options).then(opt => {
    return uni.request(opt)
  }).then(this.config.responseRequest)
},
  get(){...}
  post(){...}

五、通用请求拦截器和响应拦截器

@/api/api.js

import store from "@/store/index.js"
export default {
  config:{
  //请求拦截器（给请求统一添加 公共请求头、baseUrl、method
  beforeRequest(options = {}){
    return new Promise((resolve,reject) => {
      const baseUrl = 'http://xxxxx.cn'
      const appid = 'bd9d01ecc75dbbaaefce'
      const token = store.state.token
      //添加公共请求参数
      options.url = baseUrl + options.url
      options.header = {
        appid,
        token,
      }
      options.method = options.method || 'GET'
      resolve(options)
    })
  },
  //接收参数请求后得到的数据，处理非成功数据reject，并将数据剥离后返回resolve
  responseRequest(data) {
    return new Promise((resolve,reject) => {
      const [error, res] = data
      if(res.data.msg != 'ok'){
        const msg = res.data.data || '请求失败'
        uni.showToast({
          title:msg,
          icon:'none'
        })
        if(msg === 'Token 令牌不合法，请重新登录'){
          store.dispatch('loginOut')
          uni.navigateTo({
            url:'/pages/login/login'
          })
        }
        return reject(msg)
      }
      return resolve(res.data.data)
     })
   }
 },
request (options){...}
get(){...}
post(){...}
}

六、完整代码：以登录注册为例

@/pages/logini/login.vue

//提交表单信息 登录函数
submitLogin(){
  if(!this.checked && this.type == 'login'){
    return this.$toast('请同意用户协议&隐私声明')
  }
  const data = Onject.assign(this.form,{})
  uni.showLoading({
    title:'loading'
  })
  this.$api['userLogin'](data).then(res => {
    this.$toast('登录成功')
    this.$store.dispatch('login',res)
  })
}

@/api/api.js

import api from "./request"
export default {
  //获取首页数据 get
  getIndexData(){
    return api.get('./mobile/index')
  }
  //登录 post
  userLogin(data){
    return api.post('./mobile/login',data)
  }
}

@/api/request.js

import store from "@/store/index.js"
export default {
	// 请求拦截器 原理：利用微任务.then 让所有使用请求拦截器的函数 在拦截器函数之后执行
	config: {
		// 请求拦截器(给请求统一添加 公共请求头、baserUrl、method)
		beforeRequest(options = {}) {
			return new Promise((resolve, reject) => {
				const baseUrl = 'http://demonuxtapi.dishait.cn'
				const appid = 'bd9d01ecc75dbbaaefce'
				const token = store.state.token
				// 添加公共请求参数
				options.url = baseUrl + options.url
				options.header = {
					appid,
					token
				}
				options.method = options.method || 'GET'
				resolve(options)
			})
		},
		// 响应拦截器 (接收参数请求后得到的数据，处理非成功数据reject，并将数据剥离返回resolve)
		responseRequest(data) {
			return new Promise((resolve, reject) => {
				const [error, res] = data
				if (res.data.msg !== 'ok') {
					const msg = res.data.data || '请求失败'
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					if(msg === 'Token 令牌不合法，请重新登录') {
						store.dispatch('loginOut')
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
					return reject(msg)
				}
				return resolve(res.data.data)
			})
		}
	},
	request(options) {
		return this.config.beforeRequest(options).then(opt => {
			return uni.request(opt)
		}).then(this.config.responseRequest)
	},
	get(url, params = null, options = {}) {
		options.url = url
		options.url += params ? ('?' + Object.keys(params).map(key => key + '=' + params[key]).join('&')) : ''
		options.method = 'GET'
		return this.request(options)
	},
	post(url, data = null, options = {}) {
		options.url = url
		options.data = data
		options.method = 'POST'
		return this.request(options)
	},
}