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

Question

我使用命令vue create axe 使用vue-cli-3.0.016beta 创建了一个新的vue 项目。然后使用npm install axios --save 安装axios。在main.js文件中我导入了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')

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

Unhandled promise rejection 
TypeError
​
columnNumber: 7
​
fileName: "http://localhost:8080/app.js line 1065 > eval"
​
lineNumber: 57
​
message: "parsed is undefined"
​
stack: "isURLSameOrigin@webpack-internal:///./node_modules/axios/lib/helpers/isURLSameOrigin.js:57:7\ndispatchXhrRequest@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:109:50\nPromise@webpack-internal:///./node_modules/core-js/modules/es6.promise.js:177:7\nxhrAdapter@webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:12:10\ndispatchRequest@webpack-internal:///./node_modules/axios/lib/core/dispatchRequest.js:59:10\nrun@webpack-internal:///./node_modules/core-js/modules/es6.promise.js:75:22\nnotify/<@webpack-internal:///./node_modules/core-js/modules/es6.promise.js:92:30\nflush@webpack-internal:///./node_modules/core-js/modules/_microtask.js:18:9\n"
​
__proto__: Object { stack: "", … }

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

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

谢谢

Answer 1

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

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>

这为您提供了更大的灵活性，并允许您分离远程操作，并允许将第一站响应处理与您的组件分开，从而实现更多的可重用性。

Answer 2

而不是

Vue.use(axios);

你应该

Vue.prototype.$axios = axios;

那么你就可以全局使用了

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

如果你想用axios添加全局拦截器，可以

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

// and
Vue.prototype.$axios = axios;