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(