如何在 Laravel 5.5 中使用 npm 包：axios？

How to use npm package: axios in Laravel 5.5?

提问by Sanjay

I want to do AJAX Request with Axios in Laravel. I did npm install axios --savebut i don't know how to use it. Please help me how can I use axios in my laravel project.

我想在 Laravel 中使用 Axios 执行 AJAX 请求。我有，npm install axios --save但我不知道如何使用它。请帮助我如何在我的 Laravel 项目中使用 axios。

Here's my ajax-land.blade.php:

这是我的 ajax-land.blade.php：

<div id="app">
    <ul>
        <li v-for = "skill in skills" v-text = "skill"></li>
    </ul>
</div>
<script src = "https://vuejs.org/js/vue.js"></script>
<script src = "/js/axisa.js"></script>

Here's my axisa.js:

这是我的axisa.js：

 new Vue({
    el: '#app',
    data: {
        skills: []
    },
    mounted(){
        axios({
            method: 'get',
            url: '/links'
        })
        .then(response => this.skills = response.data)
    }
});

Here are my routes:

以下是我的路线：

Route::get('/', function () {
    return view('ajax-land');
});

Route::get('/links', function(){
    return ['Google', 'Microsoft', 'Facebook', 'Twitter', 'LinkedIn'];
});

Here's the bootstrap.js:

这是 bootstrap.js：

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

Here's the app.js:

这是 app.js：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

There were some tutorials to import axios in bootstrap.js by import axios from 'axios';- and also did window.axios = axiosin axisa.js but for some reason it didn't work. Please help me how can i use axios in Laravel.

有一些教程可以通过import axios from 'axios';-在 bootstrap.js 中导入 axios，并且window.axios = axios在 axisa.js 中也有，但由于某种原因它不起作用。请帮助我如何在 Laravel 中使用 axios。

回答by ggdx

Axios is a simple promise based HTTP client. In Laravel, it is on the window object by default, so just use like so:

Axios 是一个简单的基于 Promise 的 HTTP 客户端。在 Laravel 中，它默认在 window 对象上，所以只需像这样使用：

GET

得到

axios.get('/some-path').then(res => {
    console.log(res.data)
})

POST

邮政

let data = {
    some: "thing"
}
axios.post('/some-path', data).then(res => {
    console.log(res.data)
})

Documentationis pretty good, as always, RTFM.

文档非常好，一如既往，RTFM。

---

---

EDIT 1

编辑 1

If you get undefined on the axios object, use

如果在 axios 对象上未定义，请使用

import axios from 'axios'

at the top of your JS file and if you are entirely missing Axios, npm install axios --save

在你的 JS 文件的顶部，如果你完全没有 Axios， npm install axios --save

回答by simphiwe sifiso hlabisa

in your resource/assests/js/app.js

在你的资源/assests/js/app.js

simple add: var axios = require('axios');

简单添加： var axios = require('axios');

since import axios from 'axios' - seems to be depricated

因为从 'axios' 导入 axios - 似乎被贬低了