uniapp项目中封装uni.request

• 在根目录下创建一个 /api/common/request.js，内容如下

  const request = (config) => {
      // 处理url
      config.url = 'http://127.0.0.1:8888' + config.url
      if (!config.data) {
          config.data = {}
      }
      let promise = new Promise(function(resolve, reject) {
          uni.request(config).then(responses => {
              // HTTP状态码
              if (responses.statusCode !== 200) {
                  uni.showToast({
                      title: responses.errMsg,
                      icon: 'none'
                  })
                  return
              }
  
              // 我的响应数据结构为 {code: 0, message: '', data: object}
              // 也就是下方的responses.data
              if (responses.data.code != 0) {
                  uni.showToast({
                      title: responses.data.message,
                      icon: 'none',
                      duration: 2000
                  })
                  // 自定义状态码的处理逻辑,个人理解相当于axios的响应拦截
                  if (responses.data.code === 1001) {
                      setTimeout(() => {
                          uni.navigateTo({
                              url: '/pages/login/index'
                          })
                      }, 2000);
                  }
                  return
              }else {
                  resolve(responses.data)
                  return
              }
          }).catch(error => {
              reject(error)
          })
      })
      return promise
  }
  
  export default request

• 在其他api中使用，例如登录：在根目录下创建文件 /api/auth/login.js

  import request from '@/api/common/request.js'
  import encrypt from '@/api/common/encrypt.js'
  
  // 密码登录
  function passwordLogin(data) {
      let loginData = {}
      loginData.username = data.username
      loginData.password = encrypt.encryptText(data.password)
  
      return request({
          method: "POST",
          url: '/auth/passwordLogin',
          data: loginData
      })
  }
  
  export default {
      passwordLogin
  }

• 在页面中使用api

  import loginApi from '@/api/auth/login.js'
  
  export default {
      methods: {
          // 账号密码登录
          handlePasswordLogin() {
              if (!this.form.username || !this.form.password) {
                  uni.showToast({
                      title: '请输入账号和密码',
                      icon: 'none'
                  })
                  return
              }
              // 调用api
              loginApi.passwordLogin(this.form).then(res => {
                  uni.showToast({
                      title: '登录成功',
                      icon: 'none'
                  })
                  setTimeout(() => {
                      uni.switchTab({
                          url: '/pages/home/index'
                      })
                  }, 1500);
              })
          }
      }
  }

参考文档

• 【uni-app】uni.request封装，更好的管理api接口和使用 - 瀚海浪亭 - 博客园