uni-app封装request请求及get、post、put等方法

直接上代码

request.js文件

export default {

  common: {

    baseUrl: "http://172.20.4.212:3000/api",

    data: {},

    header: {

      "Content-Type": "application/json",

      "Content-Type": "application/x-www-form-urlencoded"

    },

    method: "GET",

    dataType: "json"

  },

  request (options = {}) {

    uni.showLoading({

      title: '加载中...'

    })

    options.url = this.common.baseUrl + options.url

    options.data = options.data || this.common.data

    options.header = options.header || this.common.header

    options.method = options.method || this.common.method

    options.dataType = options.dataType || this.common.dataType

    console.log('option', options)

    return new Promise((resolve, reject) => {

      uni.request({

        ...options,

        success: (res) => {

          if (res.statusCode != 200) {

            return reject()

          }

          setTimeout(() => {

            uni.hideLoading()

          }, 200)

          let data = res.data.data

          resolve(data)

        },

        fail: (error) => {

          reject(error)

          uni.showToast({

            mask: true,

            icon: 'error',

            title: '接口或网络异常',

            duration: 2000

          })

        }

      })

    })

  },

  /**

   * 本地资源上传到开发者服务器

   */

  upload (options = {}) {

    return new Promise((resolve, reject) => {

      uni.uploadFile({

        url: options.url,

        filePath: options.data.filePath,

        name: 'file',

        success: (res) => {

          resolve(JSON.parse(res.data))

        },

        fail (error) {

          reject(error)

          uni.showToast({

            mask: true,

            icon: 'none',

            title: '接口或网络异常',

            duration: 2000

          })

        }

      })

    })

  },

  uploadFile (url, data) {

    return this.upload({

      url,

      data

    })

  },

  /**

   * get请求

   * @param {String} url

   * @param {Object} data

   */

  get (url, data) {

    return this.request({

      url,

      data,

      method: 'GET',

    })

  },

  /**

   * post请求

   * @param {String} url

   * @param {Object} data

   */

  post (url, data) {

    return this.request({

      url,

      data,

      method: 'POST',

    })

  },

  /**

   * put请求

   * @param {String} url

   * @param {Object} data

   */

  put (url, data) {

    return this.request({

      url,

      data,

      method: 'PUT'

    })

  },

  /**

   * delete请求

   * @param {String} url

   * @param {Object} data

   */

  del (url, data) {

    return this.request({

      url,

      data,

      method: 'DELETE'

    })

  },

}

main.js文件

import App from './App'

import Vue from 'vue'

import './uni.promisify.adaptor'

import http from './utils/request.js'

Vue.prototype.$http = http

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({

  ...App

})

app.$mount()

 

index.js文件

init () {

      this.$http.get('/indexList/data').then(res => {

        this.topBar = res.topBar

        this.newTopBar = this.initData(res)

      }).catch(() => {

        uni.showToast({

          title: '请求失败',

          icon: 'none'

        })

      })

    },