wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Vue js axios: Используем axios для доступа к API — Vue.js

alexxlab
No Comments

Содержание

Используем axios для доступа к API — Vue.js

Vue.js

  • Обучение

    • Документация
      • Руководство
      • API
      • Рекомендации
      • Примеры
      • Книга рецептов
    • Видео курсы

      • Vue Mastery

      • Vue School

  • Экосистема

    • Помощь
      • Форум
      • Чат
      • Митапы
    • Инструментарий
      • Инструменты разработчика
      • Vue CLI
      • Vue Loader
    • Официальные плагины
      • Vue Router
      • Vuex
      • Vue Server Renderer
    • Новости
      • Еженедельные новости
      • Roadmap
      • События
      • Twitter
      • Блог
      • Вакансии
      • Сообщество разработчиков
  • Команда
  • Ресурсы

    • Партнёры
    • Темы
    • Awesome Vue
    • Найти пакеты для Vue
  • Поддержать Vue

    • Единоразовые пожертвования
    • Повторяющиеся взносы
    • Магазин футболок
  • Переводы

    • English
    • 中文
    • 日本語
    • 한국어
    • Português
    • Français
    • Tiếng Việt
    • Español
    • Bahasa Indonesia

Специальный спонсор

Платиновые спонсоры

Стать спонсором

Книга рецептовbeta

  • Введение
  • Добавление свойств экземпляра
  • Валидация форм
  • Редактируемая система SVG-иконок
  • Создание блога, управляемого CMS
  • Модульное тестирование Vue-компонентов
  • Создание пользовательской директивы прокрутки
  • Отладка в VS Code
  • Используем axios для доступа к API
  • Устранение утечек памяти
  • Хранение данных на стороне клиента
  • Публикация Vue-компонентов в npm
  • Интегрируем Docker в приложение Vue.js
  • Практическое использование слотов с ограниченной областью видимости с GoogleMaps

Платиновые спонсоры

Стать спонсором

Использования Axios в Vue.js | UA Blog

Довольно много фреймворков имеют встроенный апи для отправки HTTP запросов. Angular 2 имеет http модуль,JQuery имеет $.ajax, и до версии Vue 2.0, Vue.js имел vue-resource. В Vue 2.0 разработчики фреймворка решили что наличие встроенного http клиента является избыточным и будет лучше использовать сторонние библиотеки. Одной из самых популярных библиотек является Axios.
Axios это мощный http клиент. Он использует промисы по умолчанию и работает как на стороне клиента так и на стороне сервера(что делает возможным загрузку данных во время рендеринга на сервере). Также эту библиотеку довольно легко использовать в Vue, так как она использует промисы, можно комбинировать ее с async/await чтобы получить лаконичный не громоздкий код отправки запросов.

Установка

Axios можно установить с помощью NPM или Yarn:

# Установка через Yarn
$ yarn add axios -

# Установка через NPM
$ npm i axios -s

Загрузка  данных  через GET запрос
Для примера загрузим данные прямо в компоненте, но важно помнить что это является плохой практикой и лучше вынести код в сторонний класс в реальных приложениях.
<template>
  <ul v-if="posts &amp;&amp; posts.length">
    <li v-for="post of posts">
      <h3>{{post.title}}</h3>
      <p>{{post.body}}</p>
    </li>
  </ul>

  <p v-if="error">
      {{error.message}}
  </p>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      error: null
    }
  },

  // Загружаем данный когда компонент создался
  created() {
    axios.get(`${Vue.axios.defaults.baseURL}/posts`)
    .then(response => {
      // JSON ответы автоматически парсяться
      this.posts = response.data
    })
    .catch(e => {
      this.error=e;
    })
  }
}
</script>

Отправка данных с помощью POST запроса
С помощью Axios можно с легкостью отправлять POST, PUT, PATCH, и DELETE запросы
<template>
    <input type="text" v-model="postBody" @change="postPost()"/>
    <p v-if="error">
       {{error.message}}
    </p>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      error: null
    }
  },

  // Отправляет данные поста на сервер
  postPost() {
    axios.post(`${Vue.axios.defaults.baseURL}/posts`, {
      body: this.postBody
    })
    .then(response => {})
    .catch(e => {
      this.error=e;
    })
  }
}
</script>

Установка базовой конфигурации для всех запросов
Axios дает возможность создать базовый инстанс который позволяет расширить базовый URL и конфигурацию для всех вызовов инстанса. Это очень удобно если вы работаете с одним API, или вам нужно передавать токен авторизации в всех запросах.
import axios from 'axios';

export const HTTP = axios.create({
   baseURL: `some api url`,
   headers: {
     Authorization: 'Bearer {token}'
   }
 })

Теперь отправка запросов будет выглядеть так:
import {HTTP} from './http-common';

export default {
  data() {
    return {
      posts: [],
      error: null
    }
  },

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.error=e;
    })
  }
}

 Просмотры:
 2 245
 
Извлечение данных из стороннего API с помощью Vue.js и Axios
 Хотите узнать Vue.js с нуля? Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 14,99 / месяц .
 Чаще всего при создании приложения JavaScript вам нужно будет получать данные из удаленного источника или использовать API . Недавно я изучил некоторые общедоступные API и обнаружил, что с этими источниками можно сделать много интересных вещей.
 С помощью Vue.js вы можете буквально создать приложение на основе одного из этих сервисов и начать предоставлять контент пользователям за считанные минуты.
 Я покажу, как создать простое новостное приложение, которое будет показывать самые популярные новостные статьи дня, позволяя пользователям фильтровать по категориям интересов, получая данные из API New York Times .  Вы можете найти полный код этого урока здесь .
 Вот как будет выглядеть финальное приложение:
 Чтобы следовать этому уроку, вам понадобятся базовые знания Vue.js.  Вы можете найти отличное руководство по началу работы для этого здесь .  Я также буду использовать синтаксис ES6, и вы можете узнать об этом здесь .
 Структура проекта 
 Мы сделаем все очень просто, ограничившись двумя файлами:
./app.js
./index.html

 app.jsindex.html
 Мы начнем с некоторой базовой разметки в index.html
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The greatest news app ever</title>
  </head>
  <body>
    <div>
      <h4>VueNews</h4>
    </div>
  </body>
</html>

 Затем включите Vue.js и app.jsindex.html</body>
 <script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>

 При желании можно включить Foundation , чтобы воспользоваться некоторыми готовыми стилями и сделать наш взгляд более привлекательным.  Включите это в <head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">

 Создание простого приложения Vue 
 Сначала мы создадим новый экземпляр Vue в элементе div#app
 
const vm = new Vue({
  el: '#app',
  data: {
    results: [
      {title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
      {title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
      {title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
      {title: "four the last time", abstract: "lorem ipsum some test dimsum"}
    ]
  }
});

 Мы сообщаем Vue, на какой элемент монтировать, с помощью опции el , и определяем, какие данные будет использовать наше приложение с помощью опции data .
 Чтобы отобразить эти фиктивные данные в нашем представлении приложения, мы можем написать эту разметку внутри элемента #app
 
<div v-for="result in results">
  <div>
    <div>
      {{ result.title }}
    </div>
    <div>
      <p>{{ result.abstract }}.</p>
    </div>
  </div>
</div>

 Директива v-for Мы также используем двойные фигурные скобки, чтобы показать содержимое каждого из них.
 Примечание: вы можете прочитать больше о синтаксисе шаблона Vue здесь .
 Теперь у нас есть основной рабочий макет:
 Извлечение данных из API 
 Чтобы использовать API NYTimes, вам нужно получить ключ API.  Так что, если у вас его еще нет, зайдите на их страницу регистрации и зарегистрируйтесь, чтобы получить ключ API для API Top Stories .
 Создание Ajax-запросов и обработка ответов 
 Axios — это HTTP-клиент на основе обещаний для выполнения Ajax-запросов, который отлично подойдет для наших целей.  Он предоставляет простой и богатый API.  Это очень похоже на API fetchтонкости .
 Примечание. Раньше vue-resourceтеперь он удален .
 Включая аксиосы:
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 Теперь мы можем сделать запрос на получение списка главных новостей из homeсмонтировано :
 

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
    .then(response => {this.results = response.data.results})
  }
});

 Помните: замените your_api_keyNYT Dev Network .
 Теперь мы можем видеть новостную ленту на главной странице нашего приложения.  Не беспокойтесь о искаженном виде;  мы вернемся к этому чуть позже:
 Ответ от NYT API выглядит следующим образом через Vue devtools:
 Совет: используйте Vue Devtools, чтобы упростить отладку приложений Vue.
 Чтобы сделать нашу работу более аккуратной и многократно используемой, мы проведем небольшой рефакторинг и представим вспомогательную функцию для построения наших URL-адресов.  Мы также зарегистрируем getPostsобъекту methods :
 const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const ApiKey = "your_api_key";

function buildUrl (url) {
  return NYTBaseUrl + url + ".json?api-key=" + ApiKey
}

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted () {
    this.getPosts('home');
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.results = response.data.results;
      }).catch( error => { console.log(error); });
    }
  }
});

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

const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted () {
    this.getPosts('home');
  },
  methods: {
    getPosts(section) {
      let url = buildUrl(section);
      axios.get(url).then((response) => {
        this.results = response.data.results;
      }).catch( error => { console.log(error); });
    }
  },
  computed: {
    processedPosts() {
      let posts = this.results;

      
      posts.map(post => {
        let imgObj = post.multimedia.find(media => media.format === "superJumbo");
        post.image_url = imgObj ? imgObj.url : "http://placehold.it/300x200?text=N/A";
      });

      
      let i, j, chunkedArray = [], chunk = 4;
      for (i=0, j=0; i < posts.length; i += chunk, j++) {
        chunkedArray[j] = posts.slice(i,i+chunk);
      }
      return chunkedArray;
    }
  }
});

 В приведенном выше коде в вычисляемом свойстве processedPostsimage_url Мы делаем это, просматривая resultsmultimedia Затем мы назначаем URL этого носителя image_url В тех случаях, когда носитель недоступен, мы делаем URL-адрес по умолчанию изображением из Placehold.it .
 Мы также пишем цикл, чтобы сгруппировать наш массив results Это позаботится о искаженном виде, который мы видели ранее.
 Примечание: Вы также можете легко сделать это с библиотекой вроде Lodash .
 Вычисленные свойства отлично подходят для манипулирования данными.  Вместо того, чтобы создавать метод и вызывать его каждый раз, когда нам нужно разделить наш массив сообщений, мы можем просто определить его как вычисляемое свойство и использовать его по своему желанию, поскольку Vue автоматически обновляет вычисляемое свойство processingPosts при processedPostsresults
 Вычисляемые свойства также кэшируются на основе их зависимостей, поэтому до тех пор, пока results Это поможет с производительностью, особенно при выполнении сложных манипуляций с данными.
 Затем мы редактируем нашу разметку в processedPosts
 index.html
 Теперь приложение выглядит немного лучше:
 Представление компонента списка новостей 
 Компоненты могут использоваться для поддержания модульности приложения и в основном расширять HTML.  «Список новостей» может быть реорганизован для компонента, так что, например, если приложение расширяется и принимается решение использовать список новостей где-либо еще, это будет легко:
 
<div v-for="posts in processedPosts">
  <div v-for="post in posts">
    <div>
    <div>
      {{ post.title }}
    </div>
    <a :href="post.url" target="_blank"><img :src="post.image_url"></a>
    <div>
      <p>{{ post.abstract }}</p>
    </div>
  </div>
  </div>
</div>

 В приведенном выше коде мы регистрируем глобальный компонент, используя синтаксис 
Vue.component(‘news-list’, {
props: [‘results’],
template: `
<section>
<div class=»row» v-for=»posts in processedPosts»>
<div class=»columns large-3 medium-6″ v-for=»post in posts»>
<div class=»card»>
<div class=»card-divider»>
{{ post.title }}
</div>
<a :href=»post.url» target=»_blank»><img :src=»post.image_url»></a>
<div class=»card-section»>
<p>{{ post.abstract }}</p>
</div>
</div>
</div>
</div>
</section>
`,
computed: {
processedPosts() {
let posts = this.results;
posts.map(post => {
let imgObj = post.multimedia.find(media => media.format === «superJumbo»);
post.image_url = imgObj ? imgObj.url : «http://placehold.it/300×200?text=N/A»;
});
let i, j, chunkedArray = [], chunk = 4;
for (i=0, j=0; i < posts.length; i += chunk, j++) {
chunkedArray[j] = posts.slice(i,i+chunk);
}
return chunkedArray;
}
}
});
const vm = new Vue({
el: ‘#app’,
data: {
results: []
},
mounted () {
this.getPosts(‘home’);
},
methods: {
getPosts(section) {
let url = buildUrl(section);
axios.get(url).then((response) => {
this.results = response.data.results;
}).catch( error => { console.log(error); });
}
}
});
 Рекомендуется использовать дефис при определении имен тегов, чтобы они не конфликтовали с текущими или будущими стандартными тегами HTML.
 Введенные нами дополнительные параметры объясняются следующим образом.
  •  Реквизиты : это массив данных, которые мы хотим передать компоненту из родительской области.  Мы добавили Vue.component(tagName, options)
  •  Шаблон : здесь мы определяем разметку для списка новостей.  Обратите внимание, что мы завернули наш список в results Это потому, что компонент должен иметь один корневой элемент, а не несколько (который был бы создан нашей итерацией <section>
 Настройка нашей разметки для использования нашего компонента div.rownews-list
 results
 Примечание. Компоненты также можно создавать как отдельные файловые компоненты (файлы 
<div class=«container« id=«app«>
<h4 class=«text-center«>VueNews</h4>
<news-list :results=«results«></news-list>
</div>
веб-пакет . Хотя это выходит за рамки этого учебного пособия, оно рекомендуется для более крупных или более сложных приложений.
 Чтобы продвинуться дальше, вы могли бы даже пойти дальше, сделав каждую статью компонентом, и сделать вещи еще более модульными.
 Реализация фильтров категории 
 Чтобы сделать наше приложение богаче, мы можем теперь ввести фильтры категорий, чтобы пользователи могли показывать только определенные категории новостей.
 Сначала мы зарегистрируем список разделов и раздел, который просматривается в нашем приложении:
 .vue
 Далее мы можем добавить это в наш контейнер const SECTIONS = "home, arts, automobiles, books, business, fashion, food, health, insider, magazine, movies, national, nyregion, obituaries, opinion, politics, realestate, science, sports, sundayreview, technology, theater, tmagazine, travel, upshot, world"; 
const vm = new Vue({
el: ‘#app’,
data: {
results: [],
sections: SECTIONS.split(‘, ‘), 
section: ‘home’, 
},
mounted () {
this.getPosts(this.section);
},
});
 div#app
 При нажатии кнопки «Получить» мы 
<section>
<h5>Filter by Category</h5>
<form>
<div>
<div>
<select v-model="section">
<option v-for="section in sections" :value="section">{{ section }}</option>
</select>
</div>
<div>
<a @click="getPosts(section)">Retrieve</a>
</div>
</div>
</form>
</section>
getPostsclick@click
 Последние штрихи и демонстрации 
 Я решил добавить несколько незначительных (необязательных) штрихов, чтобы приложение стало немного лучше, например, загрузив изображение.
 Вы можете увидеть демо в CodePen ниже (ограниченная функциональность):
 Кроме того, вы можете просмотреть живую версию здесь .
 Вывод 
 В этом руководстве мы узнали, как запустить проект Vue.js с нуля, как извлекать данные из API, используя axios , и как обрабатывать ответы и манипулировать данными с использованием компонентов и вычисляемых свойств.
 Теперь у нас есть функциональное приложение Vue.js 2.0, построенное на основе API-сервиса.  Есть множество улучшений, которые можно сделать, подключив некоторые другие API.  Например, мы могли бы:
  •  автоматически ставить посты в социальных сетях из категории с помощью Buffer API
  •  Пометить сообщения, которые будут прочитаны позже, используя Pocket API
 … и так далее.
 Весь код этого проекта также размещен на GitHub , так что вы можете клонировать, запускать и вносить любые улучшения, которые вам нравятся.
Основы работы с axios.js, c примерами
Автор статьи: admin
В этой статье вы прочитаете про библиотеку axios.js, которая позволяет работать с AJAX, будут примеры.
Также, посмотрите статью: Как работать с AJAX на JQuery, это если вам нужен JQuery.
Подключение Axios.JS:
Первым делом нужно подключить библиотеку, это можно сделать, через терминал или через CDN.
Терминал:
Если вы решите установить через терминал, то тут есть три способа, NPM, Bower и Yarn.
Используя NPM:
Используя Bower:
Используя Yarn:
Axios.js через CDN:
Если вы хотите через CDN, то для этого просто подключите скрипт в <head>.
<script src=»https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js»></script>
Дальше в коде подключаем через require или inport, если использовали JS фреймворк.
Работа с Axios.js:
Для того что бы работать с этой библиотекой, нужно запомнить несколько самых главных команд.
// Get запрос
axios.get(‘/path’).then(res => {
    console.log(res); // Результат ответа от сервера
});
// Post запрос
axios.post(‘/path’, {«Name»: «Vova»}).then(res => {
    console.log(res); // Результат ответа от сервера
});
// Put запрос
axios.put(‘/path’, {«Name»: «Vova»}).then(res => {
    console.log(res); // Результат ответа от сервера
});
// Delete запрос
axios.delete(‘/path’, {«Name»: «Vova»}).then(res => {
    console.log(res); // Результат ответа от сервера
});
Как можете заметить, у вас есть возможность делать четыре основных запроса к серверу:
GET, POST, PUT, DELETE, всё зависит от метода который будите использовать.
Также в них используется два параметра, первый, это путь, куда отправлять запрос, второй, это JSON массив для данных, ещё есть после метода отправки данных идёт .then(), внутри неё помешается функция которая будет срабатывать, если пришёл успешный ответ без ошибок.
Но если пришла ошибка, и вам надо её обработать, то используете .catch(), в качестве параметра всё также нужно использовать функцию, вот пример.
// Отправка POST запроса
axios.post(‘/user’, {
    firstName: ‘Fred’, // Имя
    lastName: ‘Flintstone’ // Фамилия
})
// Если запрос успешен
.then(function (response) {
    console.log(response);
})
// Если запрос с ошибкой
.catch(function (error) {
    console.log(error);
});
Примерно так и должна выглядеть идеальная программа с axios.js.
Вы можете настроить запрос, для этого используете axios.create(), например изменить headers.
// Создаём настройки для запроса
const instance = axios.create({
  timeout: 1000, // Через сколько отправлять запрос
  headers: {‘X-Custom-Header’: ‘foobar’} // Заголовок запроса
});
 
// Отправка GET запроса
instance.get(«/user»)
Таким образом можете поменять заголовок или задать через сколько будет отправляться запрос, после вызова метода.
Axios.js примеры:
Теперь покажу один не большой пример, будем отправлять запрос на сервер, в качестве ответа возвышается случайное число, его выводим на экран.
Сначала сделаем не большую PHP программу.
if ($_GET[«req»]) {
    header(‘Content-Type: application/json’);
    print json_encode(array(‘data’ => rand(0, 10)));
}
Тут всё просто, но если что то не понятно, то посмотрите наш учебник по PHP.
Теперь перейдём к самому коду на JavaScript.
// Получаем элемент кнопки
let btn = document.getElementById(«btn»);
// Получение элемента для вывода результата
let resElement = document.getElementById(«res»)
 
// Отслеживание события мыши
btn.addEventListener(«click», () => {
    // Отправка GET запроса
    axios.get(«/ajax.php?req=true»).then(res => {
        // Вывод на экран ответа сервера
        resElement.innerHTML = res.data.data;
    })
})
Как видите код очень простой, в начале мы берём элементы кнопки и блока в который будем выводить ответ сервера.
Дальше отслеживаем событие клика мыши на кнопку, внутри отправляем GET запрос на сервер, если запрос был удачный, то выводим число на экран, вот результат.
Всё хорошо работает.
Вывод:
В этой статье вы посмотрели основы работы с axios.js, с примерами, но если вам этого мало, то заходите по ссылки, там полная документация.
Подписываетесь на соц-сети:
Оценка:
 Количество оценивших: 2 
Средняя оценка: 5,00
 Загрузка…
Также рекомендую:
 Использования Axios в Vue.js | UA Blog 
 Довольно много фреймворков имеют встроенные апи для отправки HTTP-запросов.  Angular 2  имеет http-модуль,  JQuery  имеет $ .ajax и до версии  Vue 2.0 , Vue.js имел  vue-resource . В Vue 2.0 разработчики фреймворка решили что наличие встроенного http клиента избыточным и будет лучше использовать сторонние библиотеки. Одной из самых популярных библиотек является  Axios . 
  A  x  ios  это мощный http клиент.Он использует промисы по умолчанию и работает на стороне клиента так на стороне сервера (что делает возможным загрузку данных во время рендеринга на сервере). Также эту библиотеку довольно легко использовать в Vue, так как она использует промисы, комбинировать ее с async / await, чтобы получить не громоздкий код отправки запросов.
 Установка 
 Axios можно установить с помощью NPM или Yarn:
  
# Установка через Yarn
$ пряжа добавить аксиомы -

# Установка через NPM
$ npm я axios -s
 
 
 Загрузка данных через GET запрос 
 Для примера используется код в реальных приложениях, но важно помнить, что это является плохой практикой.
<шаблон>
  
    
    
  • 
      
     {{post.title}} 
    
      
     {{post.body}} 
    
    
    • 
  


  

      {{сообщение об ошибке}}
  



<сценарий>
импортировать axios из 'axios';

экспорт по умолчанию {
  данные() {
    возвращение {
      сообщений: [],
      ошибка: нуль
    }
  },

  // Загружаем данный компонент когда создан
  created () {
    аксиос.получить (`$ {Vue.axios.defaults.baseURL} / posts`)
    .then (response => {
      // JSON решает автоматически парсяться
      this.posts = response.data
    })
    .catch (e => {
      this.error = e;
    })
  }
}

 
 Отправка данных с помощью POST запроса 
 С помощью Axios можно с легкостью отправлять запросы POST, PUT, PATCH и DELETE
<шаблон>
    
    

       {{ошибка.сообщение}}
    



<сценарий>
импортировать axios из 'axios';

экспорт по умолчанию {
  данные() {
    возвращение {
      postBody: '',
      ошибка: нуль
    }
  },

  // Отправляет данные поста на сервер
  postPost () {
    axios.post (`$ {Vue.axios.defaults.baseURL} / posts`, {
      body: this.postBody
    })
    .then (ответ => {})
    .catch (e => {
      this.error = e;
    })
  }
}

 
 Установка данной конфигурации для всех запросов 
  Axios  дает возможность создать базовый инстанс, который позволяет расширить базовый URL-адрес и конфигурацию для всех установленных инстансов.Это очень удобно, если вы работаете с одним API, или вам нужен токен авторизации во всех запросах.
импортировать axios из 'axios';

экспорт const HTTP = axios.create ({
   baseURL: `some api url`,
   заголовки: {
     Авторизация: 'Bearer {token}'
   }
 })
 
 Теперь отправка запросов будет так выглядеть:
импортировать {HTTP} из './http-common';

экспорт по умолчанию {
  данные() {
    возвращение {
      сообщений: [],
      ошибка: нуль
    }
  },

  created () {
    HTTP.получить (`сообщения`)
    .then (response => {
      this.posts = response.data
    })
    .catch (e => {
      this.error = e;
    })
  }
}
 
Просмотры:
 2 245
.
 Извлечение данных из стороннего API с помощью Vue.js и Axios 
  Хотите узнать Vue.js с нуля?   Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium.   Присоединяйтесь сейчас всего за 14,99 $ / месяц. 
  Для создания приложения JavaScript вам нужно получить данные из удаленного источника или использовать API.   Недавно я изучил некоторые общедоступные API и обнаружил, что с этими источниками можно сделать много интересных вещей.
 С помощью Vue.js вы можете создать приложение на основе этих сервисов и начать использовать компьютер за считанные минуты.
 Я покажу, как создать простое новостное приложение, которое будет показывать самые популярные новостные статьи дня, позволяя пользователям фильтровать по категориям интересов, получая данные из API New York Times. Вы можете найти полный код этого урока здесь.
 Вот как будет выглядеть финальное приложение:
 Чтобы следовать этому уроку, вам понадобятся базовые знания Vue.js. Вы можете найти отличное руководство по началу работы для этого здесь. Я также буду использовать синтаксис ES6, и вы можете узнать об этом здесь.
 Структура проекта 
 Мы сделаем все очень просто, ограничивая двумя файлами:
  ./app.js
./index.html
  
  app.js   index.html 
 Мы начнем с некоторой методики разметки в  index.html 
  

  
    
     Лучшее новостное приложение на свете 
  
  
    

      
 VueNews 

    
 

  
 Затем включите Vue.js и  app.js   index.html   
  

  
 При желании можно включить Foundation, чтобы воспользоваться некоторыми готовыми стилями и сделать наш более привлекательными привлекательными. Включите это в  
  
  
 Создание простого приложения Vue 
 Сначала мы создадим новый экземпляр Vue в элементе  div # app 
 
const vm = новый Vue ({
  el: '#app',
  данные: {
    полученные результаты: [
      {title: "самый первый пост", аннотация: "lorem ipsum some test dimpsum"},
      {title: "а потом был второй", abstract: "lorem ipsum some test dimsum"},
      {title: "третий раз прелесть", аннотация: "lorem ipsum some test dimsum"},
      {title: "четыре в последний раз", аннотация: "lorem ipsum some test dimsum"}
    ]
  }
});
  
 Мы сообщаем Vue, на какой элемент монтировать, с помощью опции el, и определяем, какие данные будут использовать наше с помощью опции data.
 Чтобы использовать эти фиктивные данные в нашем представлении, мы можем написать эту разметку внутри элемента  #app 
 


  

    

      {{result.title}}
    

    

      
 {{result.abstract}}. 

    

  



  
 Директива  v-for  Мы также используем двойные фигурные скобки, чтобы показать содержимое каждого из них.
  Примечание: вы прочитать больше о синтаксисе шаблона Vue здесь. 
 Теперь у нас есть основной рабочий макет:
 Извлечение данных из API 
 Чтобы использовать API NYTimes, вам нужно получить ключ API. Так что, если у вас его еще нет, зайдите на их страницу регистрации и зарегистрируйтесь, чтобы получить ключ API для основных новостей API.
 Создание Ajax-запросов и обработка ответов 
 Axios — это HTTP-клиент на основе обещаний для выполнения Ajax-запросов, который отлично подойдет для наших целей.Он предоставляет простой и богатый API. Это очень похоже на API  получить  тонкости.
  Примечание. Раньше  vue-resource  теперь он удален. 
 Включая аксиосы:
 

  
 Теперь мы можем сделать запрос на получение списка главных новостей из  на главную  смонтировано:
 

const vm = новый Vue ({
  el: '#app',
  данные: {
    полученные результаты: []
  },
  mount () {
    аксиос.получить ("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=your_api_key")
    .then (response => {this.results = response.data.results})
  }
});
  
  Помните: замените  your_api_key  NYT Dev Network. 
 Теперь мы можем видеть новостную ленту на главной странице нашего приложения. Не беспокойтесь о нарушенном виде; мы вернемся к этому чуть позже:
 Ответ от NYT API выглядит следующим образом через Vue devtools:
  Совет: используйте Vue Devtools, чтобы упростить отладку приложений Vue.
 сделать нашу работу более аккуратной и многократно используемой, мы проведем небольшой рефакторинг и представим вспомогательную функцию для построения наших URL-адресов. Мы также зарегистрируем  getPosts  объекту  методы :
  const NYTBaseUrl = "https://api.nytimes.com/svc/topstories/v2/";
const ApiKey = "ваш_api_key";

function buildUrl (url) {
  вернуть NYTBaseUrl + url + ".json? api-key =" + ApiKey
}

const vm = новый Vue ({
  el: '#app',
  данные: {
    полученные результаты: []
  },
  mount () {
    этот.getPosts ('домой');
  },
  методы: {
    getPosts (section) {
      пусть url = buildUrl (раздел);
      axios.get (url) .then ((response) => {
        this.results = response.data.results;
      }). catch (error => {console.log (error);});
    }
  }
});
  
 Мы можем внести еще некоторые изменения в то, как выглядит наше представление, введя вычисляемое свойство с некоторыми изменениями исходных результатов, возвращаемых из API:
 

const vm = новый Vue ({
  el: '#app',
  данные: {
    полученные результаты: []
  },
  mount () {
    этот.getPosts ('домой');
  },
  методы: {
    getPosts (section) {
      пусть url = buildUrl (раздел);
      axios.get (url) .then ((response) => {
        this.results = response.data.results;
      }). catch (error => {console.log (error);});
    }
  },
  вычислено: {
    processingPosts () {
      пусть сообщения = this.results;

      
      posts.map (post => {
        let imgObj = post.multimedia.find (media => media.format === "superJumbo");
        post.image_url = imgObj? imgObj.url: "http: // placehold.it / 300x200? text = N / A ";
      });

      
      пусть i, j, chunkedArray = [], chunk = 4;
      for (i = 0, j = 0; i  
 В приведенном выше коде в вычисляемом свойстве  обработано из Placehold.Это .
 Мы также пишем цикл, чтобы сгруппировать наш массив  результатов  Это позаботится о искаженном виде, который мы видели ранее.
  Примечание: Вы также можете легко сделать это с библиотекой вроде Lodash. 
 Вычисленные свойства подходят для манипулирования данными. Вместо того, чтобы создать метод и вызвать его каждый раз, мы можем просто определить его как вычисляемое и использовать его по своему желанию, поскольку Vue автоматически обновляет вычисляемое свойство processingPosts при  ProcessingPosts   results 
 Вычисляемые свойства также кэшируются на основе их зависимостей, поэтому до тех пор, пока  результатов  Это поможет с производительностью, особенно при выполнении сложных манипуляций с данными.
 Затем мы редактируем нашу разметку в  loadedPosts 
  index.html  
 Теперь приложение выглядит немного лучше:
 Представление списка новостей 
 Компоненты Программу для установки модульности приложения и в основном расширять HTML. «Список новостей» может быть реорганизован для компонента, например, если приложение расширяется и принимается решение использовать список новостей где-либо еще, это будет легко:
 


  

    

    

      {{ после.заглавие }}
    

      
    

      
 {{post.abstract}} 

    

  

  



  
 В приведенном выше коде мы регистрируем глобальный компонент, используя таксис 
 Vue.component ('news-list', {
 props: ['results'], шаблон 
: `
 {{сообщение.title}}
   
 {{post.abstract}}
 `, 
 вычислено: {
 processingPosts () {
 let posts = this.results;
 сообщений. Карта (post => {
 let imgObj = post.multimedia.find (media => media.format === «superJumbo»); 
 сообщений.image_url = imgObj? imgObj.url: «http://placehold.it/300×200?text=N/A»; 
});
 пусть я, j, chunkedArray = [], chunk = 4; 
 для (i = 0, j = 0; i  chunkedArray [j] = posts.slice (i, i + chunk); 
} 
 return chunkedArray; 
} 
} 
});
 const vm = new Vue ({
 el: '#app', 
 data: {
 results: [] 
}, 
 connected () {
 this.getPosts ('home'); 
}, 
 methods: { 
 getPosts (section) {
 let url = buildUrl (section); 
 axios.get (url) .then ((response) => {
 this.results = response.data.results; 
}). catch (error => {console.log (error);}); 
} 
} 
}); 
 Рекомендуется использовать дефис при определении имен тегов, чтобы они не конфликтовали с текущими или будущими стандартными тегами HTML.
 Введенные дополнительные параметры объясняются следующим образом.
  •   Реквизиты : это массив данных, который мы хотим удалить компоненту из родительской области.Мы добавили  Vue.component (tagName, options) 
  •   Шаблон : здесь мы определяем разметку для списка новостей. Обратите внимание, что мы завернули наш список в  результаты  Это потому, что компонент должен иметь один элемент, а не несколько (который был создан нашей итерацией 
     
 Настройка нашей разметки для использования нашего компонента  div.row   news-list 
  результаты  
  Примечание.Компоненты также можно создать как отдельные файловые компоненты (файлы  
 VueNews 
   
 < / div> 
 веб-пакет.  Хотя это выходит за рамки этого учебного пособия, рекомендуются рамки для более крупных или сложных приложений. 
 продвинуться дальше, вы бы могли даже пойти дальше, сделать каждую статью компонентом, и сделать вещи еще более модульными.
 Реализация фильтров категории 
. Мы можем теперь сделать фильтры категорий, чтобы пользователи показали только первые категории новостей.
 Сначала мы зарегистрируем список разделов и раздел, который просматривается в нашем приложении:
  .vue  
 Далее мы можем добавить это в наш контейнер  const SECTIONS = "дом, искусство, автомобили, книги, бизнес, мода, еда, здоровье, инсайдерская информация, журнал, фильмы, национальный, ньюрегион, некрологи, мнение, политика, недвижимость, наука, спорт, воскресный обзор, технологии, театр, журнал, путешествия, итоги, мир "; 
 const vm = new Vue ({
 el: ‘#app’, 
 data: {
 results: [], 
 section: SECTIONS.split (‘,‘), 
 section: ‘home’, 
}, 
ounted () {
 this.getPosts (this.section); 
}, 
});
  div # приложение  
 При нажатии кнопки «Получить» мы 
 Фильтр по категории 
 
   getPosts   click   @click 
 Последние штрихи и демонстрации 
 Я решил добавить несколько незначительных (необязательных) штрихов, чтобы приложение стало немного лучше, например, загрузив изображение.
 Вы можете увидеть демо в CodePen ниже (ограниченная функциональность):
 Кроме того, вы можете просмотреть живую версию здесь.
 Вывод 
 В этой игре мы узнали, как запустить проект Vue.js с нуля, как извлекать данные из API, используя axios, и как обрабатывать ответы и манипулировать данными с использованием компонентов и вычисляемых свойств.
 Теперь у нас есть функциональное приложение Vue.js 2.0, построенное на основе API-сервиса.Есть множество улучшений, можно сделать, подключив некоторые другие API. Например, мы могли бы:
     и
  •  автоматически ставят на свои мобильные телефоны из категории с помощью Buffer API
    • .
  •  Пометить сообщения, которые будут прочитаны позже, используя Pocket API
… и так далее.
 Весь код этого проекта также размещен на GitHub, так что вы можете клонировать, запускать и вносить любые улучшения, которые вам нравятся.
 .
 Основы работы с axios.js, c примерами 
 Автор статьи: admin
 В этой статье вы прочитаете про библиотеку axios.js, которая позволяет работать с AJAX, будут примеры.
 Также посмотрите статью: Как работать с AJAX на JQuery, это если вам нужен JQuery.
 Подключение Axios.JS: 
 Первым делом нужно подключить библиотеку, это можно сделать, через терминал или через CDN.
 Терминал: 
 Если вы решите установить через терминал, то тут есть три метода, NPM, Bower и Yarn.
 Используя NPM:
 Используя Bower:
 Используя Yarn:
 Axios.js через CDN: 
 Если вы хотите через CDN, то для этого просто подключите скрипт в  .
 Дальше в коде подключаем через require или inport, если использовали JS-фреймворк.
 Работа с Axios.js: 
 Для того, что бы работать с этой библиотекой, нужно запомнить несколько самых главных команд.
 // Получить запрос
 axios.get ('/ path'). Then (res => {
 console.log (res); // Результат ответа от сервера
});
 // Отправить запрос
 axios.post ('/ path', {"Name": "Vova"}). Then (res => {
 console.log (res); // Результат ответа от сервера
});
 // Ставьте запрос
 axios.put ('/ path', {"Name": "Vova"}). then (res => {
 console.log (res); // Результат ответа от сервера
});
 // Удалить запрос
 axios.delete ('/ path', {"Name": "Vova"}). Then (res => {
 console.log (res); // Результат ответа от сервера
});
 Как заметить, у вас есть возможность делать четыре основных запроса к серверу: 
 GET, POST, PUT, DELETE, все зависит от метода будите использовать.
 Также в них используется два параметра, первый, это путь, куда отправить запрос, второй, это JSON массив данных, ещё есть после отправки данных, идёт  .then () , внутри нее помешается функция, которая будет срабатывать, если пришёл успешный ответ без ошибок.
 Но если пришла ошибка, и вам надо её обработать, чтобы использовать .catch (), в качестве программы всё также нужно использовать функцию, вот пример.
 // Отправка POST запроса
 axios.post ('/ user', {
 firstName: 'Fred', // Имя
 lastName: 'Flintstone' // Фамилия
})
 // Если запрос успешен
 .then (function (response) {
 console.log (ответ);
})
 // Если запрос с ошибкой
 .catch (функция (ошибка) {
 console.log (ошибка);
});
 Примерно так и должна выглядеть идеальная программа с axios.js.
 Вы можете настроить запрос, для этого используйте  axios.create () , например изменить заголовки.
 // Создаём настройки для запроса
 const instance = axios.create ({
 timeout: 1000, // Через сколько отправить запрос
 headers: {'X-Custom-Header': 'foobar' } // Заголовок запроса
});
 // Отправка GET запроса
 instance.get ("/ user")
 Таким образом можно поменять заголовок или задать через сколько будет отправляться запрос после вызова метода.
 Axios.js примеры: 
 Теперь покажу один не большой пример, будем отправлять запрос на сервер, в качестве ответа возвышается случайное число, его выводим на экран.
 Сначала сделаем не большую программу PHP.
 if ($ _GET ["req"]) {
 заголовок ('Content-Type: application / json');
 печать json_encode (array ('data' => rand (0, 10)));
}
 Тут всё просто, но если что то не понятно, то посмотрите наш учебник по PHP.
 Теперь перейдём к самому коду на JavaScript.
 // Получаем элемент кнопки
 let btn = document.getElementById ("btn");
 // Получение элемента для вывода результата
 let resElement = document.getElementById ("res")
 // Отслеживание событий мыши
 btn.addEventListener ("click", () => {
 // Отправка GET запроса
 axios.get ("/ ajax.php? Req = true").then (res => {
 // Вывод на экран сервера
 resElement.innerHTML = res.data.data;
})
})
 Как видите код очень простой, в начале мы берём элементы кнопки и блока который будем выводить ответ сервера.
 Дальше отслеживаем событие клика мыши на кнопку, внутри отправляем GET запрос на сервер, если запрос был удачный, выводим число на экран, вот результат.
 Всё хорошо работает.
 Вывод: 
 В этой статье вы посмотрели основы работы с axios.js, с примерами, но если вам этого мало, то заходите по ссылкам, там полная документация.
 Подписываетесь на соц-сети: 
 Оценка: 
 Средняя оценка: 5,00
 Загрузка ...
 Также рекомендую: 
.
No related posts.
 Share :
  •

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *