Блог

Главная - Вопросы по программированию - VueJS AXIOS — Правильно ли создавать экземпляр axios для каждого отдельного запроса?

VueJS AXIOS — Правильно ли создавать экземпляр axios для каждого отдельного запроса?

#javascript #ajax #api #vue.js #axios

Вопрос:

Я создал приложение VueJS, которое использует Vue-Axios для связи с API Laravel.

В моем проекте у меня есть api.js файл, содержащий следующий код:

 import axios from "axios";

export function apiRequestProtocol(token = null) {
    var api_instance = axios.create({
        baseURL: "http://127.0.0.1:8000/api/",
    });

    if (token) {
        api_instance.interceptors.request.use(
            (config) => {
              config.headers.Authorization = `Bearer ${token}`;
              return config;
            },
            (error) => {
              return Promise.reject(error);
            }
        );
    } 
    return api_instance;
}

apiRequireProtocol Функция импортируется в каждый компонент Vue, которому необходимо выполнить запрос к API Laravel.

Как вы можете видеть, каждый раз при использовании компонента apiRequestProtocol() создается новый экземпляр Axios.

Я сделал это таким образом , потому что некоторые «запросы» от Axios нужны access_token , а другие нет.

Я пытался использовать один и тот же экземпляр Axios для каждого отдельного запроса, просто меняя его заголовок, но я не смог сделать это успешно. Если вы знаете, как использовать только один экземпляр, меняя его в зависимости от запроса (если вам нужен токен или нет), пожалуйста, дайте мне знать, как это сделать.

Кроме того, я хотел бы знать, следует ли мне «удалять» эти экземпляры после их использования или есть еще лучший способ сделать это.

Спасибо!

Мой пакет.json:

 {
  ...
  "dependencies": {
    "@vueuse/head": "^0.6.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-axios": "^3.2.5",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }
}

Комментарии:

1. «Правильно ли создавать экземпляр axios для каждого отдельного запроса?» — нет. «Я пытался использовать один и тот же экземпляр Axios для каждого отдельного запроса, просто меняя его заголовок, но я не смог сделать это успешно» — подумайте о том, чтобы переадресовать вопрос с вашей неудачной попыткой. В настоящее время у вас есть проблема XY.

Ответ №1:

Несколько экземпляров

Нет, вам определенно не нужен экземпляр axios для каждого соединения! Но вам может понадобиться несколько экземпляров. В частности, я бы использовал обычный axios.get для запросов, не прошедших проверку подлинности, и экземпляр для каждого отдельного токена в приложении. Таким образом, мне не придется возиться с добавлением и удалением перехватчиков.

Простые запросы axios с заголовками

Можно обойтись вообще без всяких изысков:

 axios.get(URL, {headers: {"X-my-custom-header": "my-custom-val"}})

Аутентификация токенов с разными заголовками

можно сделать то же самое:

 var token_axios = axios.create({ BaseURL: "http://exam.pl" })
var token_interceptor = token_axios.intercepters.request.use(
  config => {
    config.headers.Authorization = "Token: MYTOKEN"
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
token_axios.get(url, {headers: {"x-my-custom-header": "abc"}})

Переопределяющий токен

может быть сделано точно так же, как мы установили его изначально, и

снятие перехватчика

это можно сделать, если мы сначала создадим или получим ссылку на него:

 token_axios.interceptors.request.eject(token_interceptor)

(обратите внимание, что мы сохранили ссылку сверху).

Хотя вы могли бы использовать парадигму использования/извлечения для изменения одного экземпляра каждый раз, и это был бы правильный подход, если бы токены часто менялись, а запросы были редкими, если (как я подозреваю) токены меняются нечасто, а запросы являются общими, я бы просто использовал несколько объектов, как описано выше.

Чтобы ответить на другой ваш вопрос, хотя в JS есть сбор мусора, если вы создавали десятки ненужных объектов, рекомендуется удалить их вручную, так как сборщик мусора вызывает непредсказуемые замедления при вызове.

Рекомендации

https://axios-http.com/docs/interceptors

Комментарии:

1. Спасибо, мне стало гораздо понятнее

2. хорошо! Я сам недавно выучил аксиос, поэтому в основном отвечаю, чтобы разобраться в своих мыслях… эти вещи могут быть странно запутанными, когда они новые. Не стесняйтесь соглашаться, если это ответит на вопрос.

Метки: