参考：官方文档-发起网络请求。
axios模块化二次封装
模块化设计请求
image.png

1、http.js文件封装请求Promise函数

  1. /**
  2.  * 拦截器配置
  3.  */
  4. uni.addInterceptor('request', {
  5.     // request 触发前
  6.     invoke(req) {
  7.         console.log("拦截器-请求前的数据：", req);
  8.         return req;
  9.     },
  10.     //请求成功后
  11.     success(res) {
  12.         console.log("拦截器-请求成功后：", res);
  13.     },
  14.     //请求失败
  15.     fail(err) {
  16.         console.log('"拦截器-请求失败后', err)
  17.     },
  18.     // 请求完成后
  19.     complete(resp) {
  20.         /**
  21.        //token验证失败  
  22.         r.code = 100; //前端如果发现是100就跳转登录页
  23.          */
  24.         console.log('拦截器-请求完成后', resp)
  25.     }
  26. })
  28. /**
  29.  * GET方法封装
  30.  * @param {String} url 请求地址 
  31.  * @param {Object} data 请求的数据
  32.  */
  33. export function GET(url, data) {
  34.     return new Promise((resolve, reject) => {
  35.         uni.request({
  36.             url,
  37.             method: 'GET',
  38.             data: data || {},
  39.             header: {
  40.                 //添加token请求头
  41.                 'Authorization': uni.getStorageSync('token')
  42.             },
  43.             success: (res) => {
  44.                 resolve(res.data)
  45.             },
  46.             fail: (err) => {
  47.                 reject(err)
  48.             }
  49.         })
  50.     })
  51. }
  52. /**
  53.  * POST方法封装
  54.  * @param {String} url 请求地址 
  55.  * @param {Object} data 请求的数据
  56.  */
  57. export function POST(url, data) {
  58.     return new Promise((resolve, reject) => {
  59.         uni.request({
  60.             url: url,
  61.             method: 'POST',
  62.             data: data || {},
  63.             header: {
  64.                 'content-type': 'application/json',
  65.                 //添加token请求头
  66.                 'Authorization': uni.getStorageSync('token')
  67.             },
  68.             success: (res) => {
  69.                 resolve(res.data)
  70.             },
  71.             fail: (err) => {
  72.                 reject(err)
  73.             }
  74.         })
  75.     })
  76. }

2、集中管理定义url地址变量

  1. /**
  2. * API接口地址
  3. * RESTful风格接口地址
  4. */
  6. // 前缀
  7. const prefix = 'http:127.0.0.1:8888'
  10. export const URLS = {
  11.   //用户管理
  12.   login: {
  13.     in: prefix + '/users/login', //登录
  14.     out: prefix + '/users/logout', //退出登录       
  15.   },
  17.   //系统设置
  18.   setting: {
  19.     roles: prefix + '/roles', //角色
  20.     users: prefix + '/users', //用户
  21.     menu: prefix + '/menu', //菜单
  22.     region: prefix + '/region', //地区
  23.     depts: prefix + '/depts', //部门
  24.     rolePermissions: prefix + '/rolePermissions', //角色权限
  25.     webset: prefix + '/siteset/webset', //网站配置
  26.     elicon: prefix + '/elicon', //el-element图标
  27.     jwt: prefix + '/jwt', //JWT token密钥
  28.   },
  29. }

3、模块接口js文件中引入http.js和url.js

  1. import {
  2.     GET,
  3.     POST
  4. } from '@/api/http.js'
  5. //引入地址变量
  6. import {
  7.     URLS
  8. } from "@/api/url.js"
  9. export default {
  10.     //用户登录
  11.     login(p) {
  12.         return POST(`${URLS.login.in}`, p)
  13.     }
  14. }

4、index.js文件引入各个模块接口js文件

  1. /**
  2.  * 这里数据请求的唯一入口
  3.  */
  4. import login from '@/api/login.js'
  7. export default {
  8.     login,    
  9. }

5、main.js引入我们封装的index.js文件，并在vue上全局挂载

  1. // 设置一个全局请求参数$api
  2. import api from '@/api/index.js'
  3. Vue.prototype.$api = api

6、在项目中通过this.$api进行调用

  1. async submit() {
  2.   let valid = await this.$refs.form.validate()
  3.   if (!valid) return
  4.   console.log('this.form', this.form);
  5.   let res = await this.$api.login.login(this.form)
  6.   console.log('登录后的返回信息', res);
  7. }

总结：uniapp封装的方法和vue中axios封装几乎一模一样