uni-app(二)接口请求封装，全局输出api

• 在项目 main.js 同级创建 utils 文件夹，
• utils里创建 config.js文件，存储重要参数

  //  获取平台信息
  const {
    system,
  } = uni.getSystemInfoSync()
  
  
  // 请求服务器环境，xxx 在这里是填充，请自行替换
  let baseUrl = ['http://xxx', 'https://xxx']
  
  //  小程序重要参数
  uni.config = {
    platform: system.startsWith("iOS") ? 2 : 1, // IOS为2 安卓为1
    imgUrl: "https://xxx", // 图片地址前缀
    baseUrl: baseUrl[1],
    appid: "xxx", // appid
  }

   

• utils里创建request.js文件，封装接口请求

  // 登录接口域名
  const LOGIN_URL = '/xx/xx'
  const {
    baseUrl,
    appid
  } = uni.config
  
  // 封装接口请求
  uni.http = (args = {}) => {
    let url = args.url || ''
    let data = args.data || {}
    data.appid = appid
      let method = args.method || 'GET'
      return new Promise((resolve, reject) => {
          request(url, data, method, resolve, reject)
      }) 
  }
  
  // 接口封装
  const request = async (url, data = {}, method, resolve, reject) => {
      let token = await getToken()
      let header = {
        'content-type': 'application/x-www-form-urlencoded',
        'token': token
      }
    uni.request({
      header,
      url: baseUrl + url,
      method,
      data,
      dataType: 'json',
      success: res => {
        if (res.statusCode == 200) {
          let code = res.data.return
          if (code == 0) {
            resolve(res.data)
          } else {
            uni.showModal({
              title: '错误码：' + code,
              content: res.data.result
            })
          }
        }
      },
      fail: err => {
        reject(err)
      }
    })
  }
  
  // 获取Token
  const getToken = async () => {
    let token = uni.getStorageSync('token')
    if (token) {
      return token
    } else {
      let tokenRes = await login()
      return tokenRes.data.token
    }
  }
  
  // 封装登录
  const login = () => {
    return new Promise((resolve, reject) => {
      uni.getProvider({
        service: "oauth",
        success(providerRes) {
          let provider = providerRes.provider[0]
          uni.login({
            provider,
            success: (codeRes) => {
              uni.request({
                url: baseUrl + LOGIN_URL,
                method: 'POST',
                header: {
                  'content-type': 'application/x-www-form-urlencoded',
                  appid
                },
                data: {
                  code: codeRes.code
                },
                dataType: 'json',
                success: (res) => {
                  if (res && res.statusCode == 200) {
                    // 存储用户信息
                    uni.setStorageSync('status', res.data.data)
                    // 存储用户token
                    uni.setStorageSync('token', res.data.token)
                    resolve(res.data)
                  } else {
                    reject(res)
                  }
                },
                fail: (err) => {
                  reject(err)
                }
              })
            },
            fail: (err) => {
              reject(err)
            }
          })
        }
      })
    })
  }

   

• utils里创建 api.js文件，整理页面需要的请求，输出api

  // 这里举个例子，实际结合自己使用场景
  // 获取列表
  let getList = function(data) {
      return await uni.http({
          url: "/xxx/xxx",
          data,
          method: "POST"
      })
  }
  
  // 全局输出
  uni.service = {
      getList
  }

   

• main.js 引入文件

  // 顺序引入，负责参数会访问不到
  
  import '@/utils/config'
  import '@/utils/request'
  import '@/utils/api'

   

• 使用

  methods: {
    async getList() {
     let obj = {
        // 参数
      }
      let res = await uni.service.getList(obj)
      if (res.return == 0) {
        // 成功操作
      }
    }
  }

   

  好了，你学废了吗，下期整理 uni-app 的其他内容，期待你的带来