Question

我使用vue create axe使用vue-cli-3.0.016beta命令创建了一个新的vue项目。然后使用npm install axios --save安装axios。在我导入main.js的{{1}}文件中，如下所示。

axios

除此之外没有一点代码更改。我仍然收到如下错误：

import Vue from 'vue'
import App from './App.vue'

import axios from 'axios'

Vue.config.productionTip = false
Vue.use(axios)

new Vue({
    render: h => h(App)
}).$mount('#app')

我想全局axios使用拦截器，因此在main.js中调用它。但是，如果我在视图页面中使用它，则没有错误！

这是一个错误还是我做错了？请帮助我解决这个问题并在全球范围内使用axios。

由于

Answer 1

代替

const notes = [{},{
    title: "My next Trip",
    body: "I would like to go to USA"
},{
    title: "Habbits to work on",
    body: "Exercise"
} ,{
    title: "Office Modification",
    body: "Get a new seat"
} ]

 const findNote = function(notes, noteTitle) {
     const index = notes.findIndex(function (note , index) {
         return note.title && note.title.toLowerCase() ===  noteTitle.toLowerCase()
     })
     return notes[index]
 }
const note = findNote(notes, "Office Modification")
console.log(note);

您应该

Vue.use(axios);

然后您就可以在全球范围内使用

Vue.prototype.$axios = axios;

如果要使用axios添加全局拦截器，则可以

login() {
    this.$axios.post('<host>/api/login', data)
        .then((res) => { // dosomething })
        .catch((err) => { // dosomething });    
}

Answer 2

所以我看到的错误就在这里

Vue.use(axios)

Vue.use需要一个vue可安装的插件。

你可以看看vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

但我会高度劝阻它。

最好创建自己的ApiHandler.js文件，分别处理所有远程资料，并且可以从任何地方轻松调用，包括vue组件和vuex。

这是我班级的开始

<script>
import axios from 'axios';

class ApiHandler{
  constructor(apiUrl) {
    this.axios = axios;
    this.apiUrl = apiUrl || '';  // this line allow passing a custom endpoint for testing
    this.config = {
      headers: { 'Cache-Control': 'no-cache' },  // can setup to prevent all caching
      baseURL: this.apiUrl,
    };
  }

  /**
   * @param {Object} payload
   * @param {String} payload.username
   * @param {String} payload.password
   */
  login({ username, password }) {
    return new Promise((resolve, reject) => {
      this.axios.post('/api/login', { username: username.toLowerCase(), password }, this.config)
        .then((response) => {
          if (response.code === 200 && response.body && response.body.token) {
            resolve(response.body.token);
          } else {
            reject('Bad Login');
          }
        })
        .catch((err) => {
          reject('internal error');
        });
    });
  }
}
</script>

然后你可以通过......随时随地调用它。

<script>
  import ApiHandler from '../lib/ApiHandler';
  const apiRequest = new ApiRequest();

  // and then anywhere in the script
  let payload = {
    username:'someuser',
    password:'somepassword',
  };
  apiRequest.login(payload)
    .then(()=>{
      // yay - I'm logged in
    })
    .catch(err => {
      // oh oh, display error
    })
</script>

这为您提供了更大的灵活性，允许您分离远程操作，并允许对组件进行单独的第一步响应处理，从而实现更多的可重用性。

如何在使用vue-cli3创建的Vue2项目中使用axios

2 个答案: