Обновление всех API-запросов с помощью ui-router stateParams и перехватчика

Question

Обновление всех API-запросов с помощью ui-router stateParams и перехватчика

0

У меня есть приложение с угловым выражением, которое повторно использует те же шаблоны для нескольких местоположений. URL-адреса выглядят примерно так:

/locations/location1/
/locations/location2/
/locations/location1/about
/locations/location2/about

И у меня есть настройка состояния, которая устанавливает параметр местоположения, который мои другие маршруты заданы как их родитель:

$stateProvider
  .state('root', {
    url: '/locations/{location:[^/]*}',
    abstract: true,
    template: '<ui-view/>'
  });

Внутри этих шаблонов страниц у меня есть несколько компонентов, которые обрабатывают запросы API. То, что я хотел бы сделать, - перехватить все HTTP-запросы в api и добавить идентификатор местоположения на основе свойства location в $ stateParams:

function apiInterceptor ($stateParams) {
  return {
    request: (config) => {
      config.url = $stateParams.location + '/' + config.url;
      return config;
    }
  };
}

module
.factory('apiInterceptor', apiInterceptor)
.config(function($httpProvider {
  $httpProvider.interceptors.push('apiInterceptor');
}

К сожалению, это дает мне круговую зависимость:

ng1UIRouter <- $stateParams <- apiInterceptor <- $http <- ng1UIRouter

Я считаю, что я мог бы обойти круговую зависимость, используя напрямую инжектор, но я прочитал, что выполнение этой проблемы означает, что у вас, вероятно, есть какая-то проблема архитектуры. Есть ли лучший способ получить идентификатор местоположения без дублирования кода для отдельных запросов api?

jhummel 24 июль 2016, в 00:06

Источник

Теги:

angularjs

angular-ui-router

angular-http-interceptors

1 ответ

Ещё вопросы

charlietfl · Answer 1 · 2016-07-23T20-44-00.000Z

Для круговых зависимостей вы можете вручную вводить услугу с помощью $ injector

пытаться

function apiInterceptor ($injector) {
  var $stateParams = $injector.get('$stateParams');
  return {
    request: (config) => {
      config.url = $stateParams.location + '/' + config.url;
      return config;
    }
  };
}

Благодарю. Я фактически упомянул решение инжектора в нижней части моего поста. Мне было интересно, если есть лучший способ для разработки решения, как бы то ни было. Круговые зависимости, по-видимому, указывают на то, что с вашим мышлением что-то пошло не так.