Vue integriert Axios-Kapselungsanfrage

Vues komponentenbasierte Entwicklungsmethode macht unsere Front-End-Entwicklung flexibler und effizienter, und in diesem Prozess ist die Dateninteraktion mit dem Back-End unvermeidlich. Axios ist ein gutes Datenanfrage-Framework, das eine praktische API-Schnittstelle bietet, einfach zu verwenden, zuverlässig und leicht zu erweitern ist. Daher haben wir uns für die Integration in das Vue-Projekt entschieden. In diesem Artikel stellen wir vor, wie man Axios in eine praktische Anfragemethode zur einfachen Verwendung in Vue-Komponenten kapselt.

Einführung in Axios

Wenn wir Axios zum Senden einer Anfrage verwenden, umfasst dies im Allgemeinen die folgenden drei Schritte:

1. Eine Axios-Instanz erstellen:

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

2. Eine Anfrage senden:

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

3. Antworten Das Ergebnis der Anfrage:

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

Die Verwendung von Axios ist sehr einfach und unkompliziert. Wenn Sie diese Codes jedoch bei jeder Verwendung in einer Vue-Komponente wiederholt schreiben müssen, ist dies zeitaufwändig und fehleranfällig. Daher können wir es in eine allgemeine Anforderungsmethode kapseln:

Axios-Anforderungskapselung

Wir können Promise, eine asynchrone Programmiermethode, verwenden, um Axios-Anfragen in eine allgemeine Methode zu kapseln und die zurückgegebenen Ergebnisse dann einheitlich zu verarbeiten.

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);
    })
  })
}

Im obigen Code erstellen wir eine Axios-Instanz, legen deren Standardkonfiguration fest und fügen außerdem Anforderungs- und Antwort-Interceptoren hinzu. In der gekapselten Anforderungsmethode verwenden wir Promise, um das Ergebnis der Anforderung zurückzugeben.

• Im Anfrage-Interceptor können wir Token zum Anfrage-Header hinzufügen und die Anfrage hier auch anpassen.
• Im Antwort-Interceptor können wir eine spezielle Verarbeitung der Antwortergebnisse durchführen, z. B. das Springen zu Statuscodefehlern, Aufforderungen, dass Ressourcen nicht vorhanden sind, oder andere Fehleraufforderungen usw.

Nutzung der Anforderungsmethode

Nachdem wir die Axios-Anfrage in eine gemeinsame Methode gekapselt haben, können wir sie in der Vue-Komponente verwenden. Beim Aufruf müssen wir nur die grundlegenden Parameter der Anfrage übergeben:

import request from '@/utils/request';

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

Ähnlich wird GET unterstützt , POST, Für HTTP-Methodenanforderungen wie PUT, DELETE und PATCH müssen Sie lediglich unterschiedliche Methoden in den Parametern angeben.

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
  }
});

Fazit

In diesem Artikel wird ausführlich erläutert, wie die Axios-Anfragemethode durch die Integration und Kapselung von Axios im Vue-Projekt gekapselt wird. Diese Kapselungsmethode kann den Umfang des wiederholten Schreibens von Code erheblich reduzieren, die Entwicklungseffizienz verbessern und auch die einheitliche Verarbeitung von Anforderungsergebnissen erleichtern. Während des Einsatzes können wir die Konfiguration und die Abfangjäger nach Bedarf anpassen und erweitern, um unterschiedlichen Anforderungen gerecht zu werden.

Das obige ist der detaillierte Inhalt vonVue integriert Axios-Kapselungsanfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!