Rumah > hujung hadapan web > uni-app > Bagaimana untuk melaksanakan enkapsulasi permintaan rangkaian dalam uniapp

Bagaimana untuk melaksanakan enkapsulasi permintaan rangkaian dalam uniapp

WBOY
Lepaskan: 2023-07-04 12:49:29
asal
3324 orang telah melayarinya

uniapp ialah rangka kerja pembangunan merentas platform Ia dibungkus berdasarkan Vue.js dan boleh membina aplikasi iOS, Android dan H5 pada masa yang sama. Dalam pembangunan sebenar, permintaan rangkaian adalah bahagian penting Untuk meningkatkan kecekapan pembangunan dan kebolehgunaan semula kod, kami boleh merangkum permintaan rangkaian. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan enkapsulasi permintaan rangkaian dalam uniapp dan memberikan contoh kod yang sepadan.

1. Buat fail enkapsulasi permintaan rangkaian
Pertama, kami perlu mencipta fail enkapsulasi permintaan rangkaian (seperti utils/request.js) untuk mengurus permintaan kami secara seragam. Fail ini biasanya mengandungi kandungan berikut:

  1. Import kaedah uni.request yang diperlukan untuk merangkum permintaan:

    import { request } from '@/uni_modules/uni-request/index.js';
    Salin selepas log masuk

    Nota: Apabila menggunakan uni.request, anda perlu memasang pemalam uni-request, yang secara rasminya disyorkan oleh uni-app.

  2. Buat fungsi yang merangkumi permintaan:

    export function post(url, params) {
      return request({
     url: url,
     method: 'POST',
     data: params
      });
    }
    
    export function get(url, params) {
      return request({
     url: url,
     method: 'GET',
     data: params
      });
    }
    Salin selepas log masuk

    Di sini kami merangkum dua kaedah, pos dan dapatkan, sepadan dengan permintaan POST dan GET masing-masing. Dalam pembangunan sebenar, kaedah permintaan jenis lain boleh ditambah mengikut keperluan projek, seperti PUT, DELETE, dll.

  3. Modul permintaan eksport:

    export default {
      post,
      get
    }
    Salin selepas log masuk

2. Gunakan permintaan rangkaian berkapsul
Di mana permintaan rangkaian perlu dihantar, kami boleh terus menghubungi kaedah terkapsul dalam langkah sebelumnya. Berikut ialah contoh mudah:

  1. Dalam fail .vue, import modul permintaan:

    import request from '@/utils/request.js';
    Salin selepas log masuk
  2. Panggil kaedah permintaan yang dirangkumkan:

    request.post('/api/login', { username: 'admin', password: '123456' })
      .then(res => {
     console.log(res.data);
      })
      .catch(err => {
     console.error(err);
      });
    Salin selepas log masuk

    Di sini kami memanggil kaedah pos terkapsul dan menghantar permintaan log masuk, Dan nama pengguna dan kata laluan dihantar sebagai parameter permintaan. Kaedah permintaan yang berbeza boleh dipanggil mengikut keperluan sebenar projek.

3. Pemprosesan lain permintaan terkapsul
Selain menghantar permintaan, kami juga boleh melakukan beberapa pemprosesan yang fleksibel. Berikut ialah beberapa kaedah pemprosesan biasa:

  1. Minta pemintasan: Sebelum menghantar permintaan, anda boleh menambah pemintas permintaan untuk memproses parameter permintaan secara seragam, menambah token, dsb.

    request.interceptors.request.use(config => {
      config.header.Authorization = 'Bearer ' + uni.getStorageSync('token');
      return config;
    })
    Salin selepas log masuk
  2. Pemintasan tindak balas: Selepas menerima respons, anda boleh menambah pemintas respons untuk mengendalikan data yang dikembalikan, pengecualian, dsb.

    request.interceptors.response.use(response => {
      if (response.statusCode === 200) {
     return response.data;
      } else {
     Promise.reject('请求失败');
      }
    })
    Salin selepas log masuk
  3. Pengendalian ralat: Pemprosesan bersatu boleh dijalankan apabila ralat berlaku, seperti muncul kotak gesaan ralat, dsb.

    request.catch(err => {
      uni.showToast({
     title: err,
     icon: 'none'
      });
    })
    Salin selepas log masuk

Kaedah pemprosesan ini boleh disesuaikan dan dikembangkan mengikut keperluan sebenar.

Ringkasan:
Dengan merangkum permintaan rangkaian dalam uniapp, kami boleh mencapai penggunaan semula kod dan meningkatkan kecekapan pembangunan. Apabila merangkum, kita boleh menambah fungsi seperti pemintasan permintaan, pemintasan tindak balas, dan pengendalian ralat mengikut keperluan sebenar untuk mengurus permintaan secara seragam. Enkapsulasi sedemikian boleh menjadikan struktur kod kami lebih jelas dan lebih mudah untuk diselenggara.

Di atas adalah pengenalan dan contoh kod tentang cara melaksanakan enkapsulasi permintaan rangkaian dalam uniapp, saya harap ia akan membantu anda. Dalam pembangunan sebenar, pakej boleh dikembangkan dan dioptimumkan mengikut keperluan projek.

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan