vue intègre la demande d'encapsulation axios

La méthode de développement basée sur les composants de Vue rend notre développement front-end plus flexible et efficace, et dans ce processus, l'interaction des données avec le back-end est inévitable. Axios est un bon framework de demande de données. Il fournit une interface API pratique, simple à utiliser, fiable et facile à développer, nous avons donc choisi de l'intégrer dans le projet Vue. Dans cet article, nous présenterons comment encapsuler Axios dans une méthode de requête pratique pour une utilisation facile dans les composants Vue.

Présentation d'Axios

De manière générale, lorsque nous utilisons Axios pour envoyer une requête, cela implique les trois étapes suivantes :

1. Créer une instance Axios :

// axios实例的默认配置
const instance = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

2. Envoyer une requête :

instance.get('/api/getUser', {
  params: {
    id: 123
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

3. Répondre à le résultat de la requête :

instance.interceptors.response.use(res => {
  if (res.status === 200) {
    return res.data;
  } else {
    throw new Error(res.status);
  }
}, err => {
  throw new Error(err);
})

L'utilisation d'Axios est très simple et directe, mais si vous devez écrire ces codes à plusieurs reprises à chaque fois que vous les utilisez dans un composant Vue, cela prend du temps et est sujet aux erreurs. Par conséquent, nous pouvons l'encapsuler dans une méthode de requête générale :

Encapsulation des requêtes Axios

Nous pouvons utiliser Promise, une méthode de programmation asynchrone, pour encapsuler les requêtes Axios dans une méthode générale, puis traiter uniformément les résultats renvoyés.

import axios from 'axios';

axios.defaults.baseURL = '';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.timeout = 5000;

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 将token添加到请求头中
    if (localStorage.getItem('accessToken')) {
      config.headers.Authorization = localStorage.getItem('accessToken');
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          // token过期，跳转到登录页
          break;
        case 404:
          // 请求资源不存在
          break;
        default:
          // 其他错误提示
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

export default function request(options) {
  return new Promise((resolve, reject) => {
    axios(options).then(res => {
      resolve(res.data);
    }).catch(error => {
      reject(error);
    })
  })
}

Dans le code ci-dessus, nous créons une instance Axios et définissons sa configuration par défaut, et ajoutons également des intercepteurs de requêtes et de réponses. Dans la méthode de requête encapsulée, nous utilisons Promise pour renvoyer le résultat de la requête.

• Dans l'intercepteur de requête, nous pouvons ajouter Token à l'en-tête de la requête, et nous pouvons également personnaliser la requête ici.
• Dans l'intercepteur de réponse, nous pouvons effectuer un traitement spécial sur les résultats de la réponse, comme accéder aux erreurs de code d'état, aux invites indiquant que les ressources n'existent pas ou à d'autres invites d'erreur, etc.

Utilisation de la méthode de requête

Après avoir encapsulé la requête Axios dans une méthode commune, nous pouvons l'utiliser dans le composant Vue Lors de l'appel, il nous suffit de transmettre les paramètres de base de la requête :

import request from '@/utils/request';

export function fetchData() {
  return request({
    url: '/api/list',
    method: 'get'
  })
}

De même, elle prend en charge GET. , POST, Pour les requêtes de méthode HTTP telles que PUT, DELETE et PATCH, il vous suffit de spécifier différentes méthodes dans les paramètres.

request({
  url: '/api/user',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'put',
  params: {
    id: 123
  },
  data: {
    username: 'admin',
    password: '123456'
  }
});

request({
  url: '/api/user',
  method: 'delete',
  params: {
    id: 123
  }
});

Conclusion

Cet article explique en détail comment encapsuler la méthode de requête Axios via l'intégration et l'encapsulation d'Axios dans le projet Vue. Cette méthode d'encapsulation peut réduire considérablement la quantité d'écriture de code répétée, améliorer l'efficacité du développement et également faciliter le traitement unifié des résultats des requêtes. Pendant l'utilisation, nous pouvons ajuster et étendre sa configuration et ses intercepteurs selon les besoins pour répondre à différents besoins.

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!