enkapsulasi permintaan uniapp

Dengan perkembangan pesat aplikasi mudah alih, rangka kerja bahagian hadapan menjadi semakin pelbagai. Antaranya, uniapp, sebagai rangka kerja pembangunan merentas platform berdasarkan Vue.js, semakin digunakan dalam pembangunan aplikasi mudah alih.

Sebagai pembangun bahagian hadapan, apabila kami membangunkan uniapp, kami sering menggunakan banyak API atau antara muka pelayan untuk interaksi data. Semasa proses permintaan data, kami perlu mempertimbangkan komunikasi rangkaian, format data, keselamatan data dan isu-isu lain, sambil memastikan kebolehbacaan dan kebolehselenggaraan kod. Untuk menangani masalah ini, kami boleh merangkum permintaan API untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Mari perkenalkan enkapsulasi permintaan uniapp.

1. Permintaan rangkaian

Untuk menghantar permintaan rangkaian dalam uniapp, anda perlu menggunakan uni.request(). Berikut ialah contoh enkapsulasi mudah:

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

Dalam fungsi enkapsulasi ini, kita perlu menghantar kaedah permintaan, URL permintaan dan data permintaan. Selain itu, fungsi ini juga mentakrifkan pengepala permintaan, fungsi panggil balik untuk kejayaan permintaan dan kegagalan permintaan.

2. Pengendalian ralat bersatu

Dalam proses merangkum permintaan, kita perlu mempertimbangkan pengendalian ralat dalam permintaan. Semasa proses pengendalian ralat, kami boleh meningkatkan kebolehselenggaraan kod dengan mengendalikan kod ralat secara seragam. Berikut ialah contoh pemprosesan kod ralat biasa:

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

Dalam fungsi terkapsul ini, kami mentakrifkan mesej gesaan ralat yang berbeza dengan menilai jenis kod ralat yang berbeza. Pendekatan ini menjadikan kod lebih mudah untuk diselenggara.

3. Permintaan konfigurasi

Untuk antara muka API yang kerap digunakan, kami boleh merangkum permintaan dengan cara yang lebih terperinci. Semasa proses menghantar permintaan, kami boleh menentukan pelbagai pilihan dan parameter permintaan untuk mencapai permintaan yang lebih fleksibel dan cekap.

Berikut ialah contoh konfigurasi permintaan:

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

Dalam fungsi enkapsulasi ini, kami mentakrifkan URL asas, permintaan tamat masa dan pengepala permintaan. Apabila memanggil fungsi, parameter luaran yang diluluskan akan digabungkan mengikut keperluan, dan parameter Accept-Language ditambahkan pada pengepala permintaan untuk mencapai konfigurasi permintaan yang lebih fleksibel.

4. Minta pemintas

Dalam aplikasi yang rumit, kami mungkin perlu memintas permintaan. Sebagai contoh, untuk setiap permintaan, maklumat pengesahan token perlu ditambahkan pada pengepala permintaan sebelum dihantar.

Berikut ialah contoh pemintas permintaan:

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  uni.addInterceptor('request', (options) => {
    options.header['token'] = uni.getStorageSync('token');
    return options;
  });

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

Dalam fungsi terkapsul ini, kami menggunakan fungsi uni.addInterceptor() untuk menambah maklumat pengesahan token pada permintaan. Kaedah enkapsulasi sedemikian boleh mencapai pengurusan bersatu dan pemprosesan setiap permintaan.

Ringkasan

Sebagai pembangun bahagian hadapan, kebolehbacaan dan kebolehselenggaraan kod sentiasa menjadi isu yang sangat diperlukan. Dalam uniapp, kita harus mencapai matlamat ini dengan merangkum permintaan API untuk meningkatkan kebolehgunaan semula kod dan kebolehbacaan kod sebanyak mungkin. Pada masa yang sama, dalam permintaan pembungkusan, kami mengoptimumkan kaedah pembungkusan mengikut keperluan sebenar setiap projek untuk mencapai operasi permintaan yang lebih cekap.

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