Bagaimana untuk merangkum kaedah permintaan rangkaian dalam projek uniapp

Dengan kemunculan era Internet mudah alih, APP telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Untuk menyediakan perkhidmatan dan pengalaman pengguna yang lebih baik, penggunaan permintaan rangkaian dalam APP telah menjadi pautan yang sangat diperlukan. Cara untuk merangkum permintaan rangkaian dengan berkesan dan meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod telah menjadi topik penting. Artikel ini akan memperkenalkan cara merangkum kaedah permintaan rangkaian dalam projek uniapp.

1. Permintaan rangkaian dalam uniapp

Rangka kerja uniapp dibangunkan berdasarkan rangka kerja Vue.js, jadi kaedah permintaan rangkaian dalam uniapp adalah serupa dengan Vue.js. Untuk menggunakan permintaan rangkaian dalam uniapp, anda perlu menggunakan kaedah uni.request Sintaksnya adalah seperti berikut:

uni.request({
    url: '',
    data: {},
    header: {},
    method: 'GET',
    dataType: 'json',
    responseType: 'text',
    success: res => {},
    fail: () => {},
    complete: () => {}
})

Maksud parameternya adalah seperti berikut:

• url: Alamat antara muka
• data: Parameter permintaan, diluluskan dalam pasangan nilai kunci
• header: Permintaan parameter pengepala, dihantar dalam pasangan nilai kunci
• method: Kaedah permintaan , menyokong GET, POST, PUT, DELETE, dll.
• dataType: Jenis data, lalai ialah json
• responseType: Jenis data respons, lalai ialah teks
• success: Kejayaan fungsi panggil balik
• fail: Gagal fungsi panggil balik
• complete: Minta selesaikan fungsi panggil balik

2. Enkapsulasi kaedah permintaan rangkaian

Dalam pembangunan sebenar, untuk meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod, kami biasanya merangkum kaedah uni.request. Berikut adalah contoh enkapsulasi kaedah permintaan rangkaian berasaskan Promise:

function request(url, data, method = 'GET', header = {}) {
    return new Promise((resolve, reject) => {
        uni.request({
            url,
            data,
            method,
            header,
            success: res => {
                resolve(res.data)
            },
            fail: err => {
                reject(err)
            }
        })
    })
}

Antaranya, kami menggunakan objek Promise untuk merangkum kaedah uni.request dan mengembalikan objek Promise supaya apabila permintaan berjaya atau gagal Menjalankan pemprosesan yang sepadan.

Seterusnya, kami memasang kaedah permintaan rangkaian ini pada tika Vue.js supaya ia boleh dipanggil sepanjang projek. Sebelum memasang, kami perlu merangkum kaedah permintaan sekali lagi dan menambah beberapa parameter biasa, seperti awalan antara muka, jenis data permintaan, dsb. Kod sampel adalah seperti berikut:

import Config from '@/config'

function request(url, data = {}, method = 'GET', header = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: Config.baseUrl + url,
      data,
      method,
      dataType: 'json',
      header: {
        'Content-Type': 'application/json',
        ...header
      },
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

export default {
  install(Vue, options) {
    Vue.prototype.$http = {
      get: (url, data, header) => {
        return request(url, data, 'GET', header)
      },
      post: (url, data, header) => {
        return request(url, data, 'POST', header)
      },
      put: (url, data, header) => {
        return request(url, data, 'PUT', header)
      },
      delete: (url, data, header) => {
        return request(url, data, 'DELETE', header)
      }
    }
  }
}

Dalam contoh ini, kami memperkenalkan fail konfigurasi Config untuk menyimpan maklumat berkaitan seperti alamat antara muka. Kami juga mengkonfigurasikan parameter permintaan biasa, seperti awalan antara muka, jenis data, dsb. Akhir sekali, kaedah permintaan rangkaian yang melaksanakan parameter biasa dan dikapsulkan oleh Vue.prototype.$http dipasang pada tika Vue.js. Promise

3. Penggunaan kaedah permintaan rangkaian

Pada langkah ini, kami telah menyelesaikan pengkapsulan dan pemasangan kaedah permintaan rangkaian dalam uniapp, dan kini ia boleh digunakan secara bebas dalam projek. Berikut ialah contoh penggunaan mudah:

<template>
  <view>
    <button @tap="getData">获取数据</button>
    <view>{{ message }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    async getData() {
      try {
        const res = await this.$http.get('/api/data')
        console.log(res)
        this.message = res.message
      } catch (e) {
        console.error(e)
      }
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan

untuk memproses permintaan rangkaian secara tidak segerak, memudahkan penulisan kod. Pada masa yang sama, kami juga dapat melihat bahawa kami tidak menulis kod yang berkaitan untuk permintaan rangkaian dalam setiap komponen, tetapi terus memanggil kaedah permintaan async/await yang dipasang pada contoh Vue.js untuk mencapai penggunaan semula kod. $http

4. Ringkasan

Melalui pengenalan artikel ini, kita dapat melihat bahawa tidak sukar untuk merangkum kaedah permintaan rangkaian dalam uniapp. Sebaliknya, melalui enkapsulasi dan pemasangan kod yang mudah, kami boleh meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod dengan banyak, dan pada masa yang sama mengelakkan lebihan kod pada tahap tertentu. Saya harap artikel ini akan membantu anda dan membolehkan anda memahami perkembangan uniapp dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk merangkum kaedah permintaan rangkaian dalam projek uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!