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 的其他內容，期待你的到來