Quelle est la manière d'encapsuler et d'envoyer des requêtes dans uniapp ?

Avec le développement continu du développement front-end, les frameworks front-end deviennent de plus en plus diversifiés. Parmi eux, la montée en puissance du framework uni-app a attiré l’attention des développeurs front-end. Parce qu'il possède de nombreuses fonctions qui ne sont disponibles qu'en développement natif, comme l'absence de packaging répété, la publication multi-extrémités, etc.

Pendant le processus de développement d'une application uni, nous devons souvent faire des requêtes réseau. Afin de faciliter la réutilisation et l'écriture de code, nous encapsulons généralement la méthode de requête. Ensuite, je partagerai comment utiliser le framework uni-app pour encapsuler la méthode d'envoi des requêtes.

1. Encapsuler axios

axios est une bibliothèque HTTP moderne basée sur Promise. Il s'agit de la bibliothèque de base pour encapsuler les requêtes et les réponses réseau dans le cadre uni-app. Nous pouvons utiliser l'intercepteur axios pour ajouter uniformément des en-têtes de requête, des paramètres de requête, une interception de réponse et d'autres opérations. Voici un exemple de code pour encapsuler axios :

import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.xxx.com', // 请求基础路径
    timeout: 10000 // 超时时长
});

// 添加请求拦截器
instance.interceptors.request.use(
    config => {
        // 添加请求头
        config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    response => {
        return response.data;
    },
    error => {
        return Promise.reject(error);
    }
);

export default instance;

2. Encapsuler la méthode de requête

Lors de l'encapsulation de la méthode de requête, nous devrions. considérer divers La méthode de demande et le format des paramètres du cas. Voici un exemple de code pour encapsuler la méthode de requête :

import axios from './axios';

export const get = (url, data) => {
  return new Promise((resolve, reject) => {
    axios
      .get(url, { params: data })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

export const post = (url, data) => {
  return new Promise((resolve, reject) => {
    axios
      .post(url, data)
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

3. Appelez la méthode encapsulée

Après avoir terminé l'encapsulation ci-dessus, nous pouvons appeler directement la méthode encapsulée là où nous devons l'utiliser. Voici un exemple de code pour appeler la méthode :

import { get, post } from './request'; // 导入封装的请求方法

get('/api/news', { page: 1, pageSize: 10 }).then(data => {
  console.log(data);
});

post('/api/login', { username: 'xxx', password: 'xxx' }).then(data => {
  console.log(data);
});

Pour résumer, dans le processus de développement d'une application uni, encapsuler la méthode de requête est une compétence très basique mais très pratique. Grâce à l'exemple de code ci-dessus, vous pouvez maîtriser comment encapsuler les axios, les méthodes de requête et les méthodes d'appel, afin de développer plus efficacement uni-app.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!