Статьи

Создать библиотеку AngularJS для API Imgur REST

Январь 20, 2018

Imgur  — это отличный сервис изображений для обмена и просмотра изображений через Интернет.

Поскольку в  последнее время вокруг AngularJS много шума,  а для Imgur REST API расширения AngularJS уже нет  , я решил взять его на себя и начать его создавать.

На моем аккаунте GitHub вы можете найти то, что я назвал  ng-imgur .

Использовать эту библиотеку просто, потому что все, что вам нужно, это токен доступа Imgur и представление о том, чего вы хотите достичь. Чтобы инициализировать фабрику AngularJS, которая упаковывает наши функции, мы бы вызвали:

var imgurInstance = new $imgur("ACCESS_TOKEN_HERE");

Это оставляет нам все возможности, которые в настоящее время существуют в библиотеке. Например, если бы мы хотели использовать   конечную точку галереи Imgur, мы бы назвали следующее:

imgurInstance.getGallery("hot", "viral").then(function(result) {
    console.log(JSON.stringify(result));
}, function(error) {
    console.error(error);
});

Итак, как мы создали эту  $imgur фабрику?

(function(){
 
    angular.module("ngImgur", []).factory("$imgur", ["$q", "$http", function ($q, $http) {
 
        var imgur = function(accessToken) {
            this.accessToken = accessToken;
            this.apiBase = "https://api.imgur.com/3";
        };
 
        imgur.prototype = {
 
        };
 
        return imgur;
 
    }]);
 
})();

Обратите внимание, что в приведенном выше коде мы создали нашу  $imgur фабрику как часть  ngImgur модуля. Конструктор — это место, где мы собираемся определить токен доступа и базовый URL-адрес Imgur API.

Чтобы сохранить этот подход на основе конструктора, мы собираемся добавить прототип к  imgur объекту. Наш прототип будет состоять из множества функций. Точнее, одна функция для каждой конечной точки API.

Давайте возьмем  getGallery метод, который мы использовали в качестве нашего примера:

imgur.prototype = {
 
    getGallery: function(section, sort, page, dateRange, showViral) {
        var deferred = $q.defer();
        var galleryEndpoint = this.apiBase + "/gallery";
        if(section !== undefined) { galleryEndpoint += "/" + section; }
        if(sort !== undefined) { galleryEndpoint += "/" + sort; }
        if(dateRange !== undefined) { galleryEndpoint += "/" + dateRange; }
        if(showViral !== undefined) { galleryEndpoint += "?showViral=" + showViral; }
        $http({
            method: "GET",
            url: galleryEndpoint,
            headers: {
                "Authorization": "Bearer " + this.accessToken
            }
        })
        .success(function(result) {
            deferred.resolve(result);
        })
        .error(function(error) {
            deferred.reject(error);
        });
        return deferred.promise;
    }
    
};

В приведенном выше  getGallery коде мы заметили несколько вещей. Обратите внимание, что мы создаем значения по умолчанию для каждого параметра   конечной точки галереи, чтобы избежать ошибок. Когда мы делаем  $httpзапрос, мы возвращаем результат как обещание. Если обещание выполнено успешно,   возвращается изображение галереи  или  альбом галереи , в противном случае возвращается ошибка, предоставленная сервером.

Библиотека  ng-imgur  не завершена. Есть много конечных точек API, которые я не успел добавить. Многие из них уже реализованы, но, основываясь на только что изученных знаниях, многие из отсутствующих функций могут быть легко добавлены.

Вывод

Создание и использование фабрики AngularJS для Imgur несложно. Поскольку API Imgur RESTful большой и тщательный,  созданная мной  библиотека ng-imgur не укомплектована всеми конечными точками, но она доходит до цели . Я призываю всех раскошелиться на репозиторий и внести любые недостающие функции.

36
Share: