uniapp可以封装组件嘛_uniapp中unirequest的封装与api接口的统一管理及使用

• uni-app

一个使用 Vue.js 开发跨平台应用的前端框架
官网地址：https://uniapp.dcloud.io/

• 文件目录

common/config.js
common/request.js
common/api.js

/**
 * common/request.js
 * @param { Object } params
 */

/**
 * common/config.js
 */

/**
 * common/api.js
 */

• 如何使用

这里我们用一个简单的微信小程序登录来做一个示范
创建token.js文件
/**
 * common/token.js
 */
import {request} from './request.js' //引入封装好的request
import api from './api.js'  //引入api接口

//校验token
export function verifyToken() {
  return new Promise((resolve, reject) => {
    var token = uni.getStorageSync('token') //从本地缓存中获取token
    if(token) {
      //token存在，向服务器发起校验token是否有效
      request({...api.verifyToken}).then(res => {
        //若token有效，更改全局登陆状态
        //若token无效，服务器返回的状态码不应该是200，这时，就进入我们的封装好的request的响应拦截中
        resolve(res)
      })
    } else {
      //token不存在，向服务器发起登陆请求，也就是获取token
      getToken().then(res => {
        resolve(res)
      })
    }
  })
}

//从服务器中获取token，也可以理解为登陆
export function getToken() {
  return new Promise((resolve, reject) => {
    //调用uni.login()api接口，获取code码
    uni.login({
      provider: 'weixin',
      success: function (res) {
      //封装一下请求的参数
      var params = {
        data: {code: res.code},
        ...api.getToken
      }
      request(params).then(res => {
        //成功，就保存token到本地缓存
        //设置全局登录状态(这一步的代码我们是没有做的，只是一个逻辑)
        uni.setStorageSync('token', res.data)
          resolve(res)
        })
      }
    })
  })
}

在App.vue中使用刚才二次封装的登录接口
/**
 * App.vue
 */
<script>import {verifyToken, getToken} from '@/common/token.js'export default {onLaunch: function() {console.log('App Launch')//应用打开，直接调用verifyToken()
    verifyToken().then(res => {console.log(res)
    })
  },onShow: function() {console.log('App Show')
  },onHide: function() {console.log('App Hide')
  }
}script>

<style>/*每个页面公共css */style>