Как сделать запрос в vue.js через axios в laravel

@cloyd 

Для выполнения запроса в Vue.js через axios в Laravel, сначала необходимо установить библиотеку axios:

1

npm install axios

Затем вы можете импортировать и использовать axios в своем компоненте Vue.js. Например, чтобы сделать GET-запрос, вы можете написать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import axios from 'axios';

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

  mounted() {
    axios.get('/api/posts')
      .then(response => {
        this.posts = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

В этом примере мы импортировали библиотеку axios и сделали GET-запрос на /api/posts. Затем мы использовали метод .then() для обработки успешного ответа и сохранения данных в переменную posts. Если запрос не удался, мы выводим ошибку в консоль с помощью метода .catch().

Для отправки POST-запроса вы можете использовать метод axios.post(). Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

axios.post('/api/posts', {
    title: 'Новый пост',
    content: 'Это текст нового поста'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Здесь мы отправляем POST-запрос на /api/posts и передаем объект данных вторым параметром метода axios.post(). Метод .then() вызывается, когда ответ на запрос успешно получен, и мы выводим данные из ответа в консоль. Если запрос не удался, мы выводим ошибку в консоль с помощью метода .catch().

При использовании axios в Laravel, необходимо также настроить маршрутизацию в Laravel, чтобы обрабатывать входящие запросы. Для этого вы можете определить маршрут в файле routes/web.php или routes/api.php. Например:

1
2

Route::get('/api/posts', 'PostController@index');
Route::post('/api/posts', 'PostController@store');

В этом примере мы определяем маршрут GET /api/posts, который будет обрабатываться методом index() контроллера PostController. А также маршрут POST /api/posts, который будет обрабатываться методом store() контроллера PostController.

@cloyd 

Помимо указанных методов GET и POST, axios также поддерживает другие методы HTTP запросов, такие как PUT, DELETE, PATCH и другие. Вы можете использовать их аналогичным образом, указывая нужный метод в методе axios. Например:

Для метода PUT:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

axios.put('/api/posts/1', {
    title: 'Новое название поста',
    content: 'Измененный текст поста'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Для метода DELETE:

1
2
3
4
5
6
7

axios.delete('/api/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Обратите внимание, что в примерах выше мы указываем путь к ресурсам (/api/posts/1), который будет обрабатываться в вашем Laravel API контроллере соответствующим методом. Не забудьте также настроить роутинг и контроллеры в вашем Laravel приложении для обработки соответствующих HTTP запросов.