Vue中使用axios调用后端接口的坑及解决

当在Vue中使用axios调用后端接口时，可能会遇到一些坑，例如跨域、请求头、响应数据处理等问题。下面是一个完整的攻略，解释了如何使用axios解决这些问题。

一、安装和引入axios

首先需要安装axios，可以使用npm或者yarn命令进行安装：

npm install axios --save

或者

yarn add axios

然后在Vue项目中引入axios：

import axios from 'axios';

Vue.prototype.$http = axios;

二、解决跨域问题

由于浏览器的同源策略，当前台应用和后台接口不在同一域下时，会遇到跨域问题。解决方法是在后台添加CORS跨域支持，或者在前台使用一个代理服务器进行跨域访问。

在本地开发环境，可以在config/index.js文件中配置代理：

proxyTable: {
    '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
}

这段代码可以将所有/api开头的请求代理到http://localhost:8080下。

三、设置请求头

有些接口需要在请求头添加一些参数，如token。可以在axios的全局配置中设置请求头：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

也可以在每次请求中设置请求头：

axios.get('/api/user', {
    headers: {
        'Authorization': 'Bearer ' + token
    }
});

四、处理响应数据

axios返回的响应数据是一个Promise对象，需要使用then和catch方法进行处理。不同的后端接口可能返回的数据格式不同，需要根据实际情况进行处理。

以下是一个处理Json格式响应数据的示例：

axios.get('/api/user')
    .then(response => {
        // 处理响应数据
        const user = response.data;
        // 其它操作
    })
    .catch(error => {
        // 异常处理
        console.log(error);
    });

以下是一个处理XML格式响应数据的示例：

axios.get('/api/user', {
        responseType: 'document'
    })
    .then(response => {
        // 处理响应数据
        const xml = response.data;
        // 其它操作
    })
    .catch(error => {
        // 异常处理
        console.log(error);
    });

五、示例

以下是一个完整的示例，演示了如何使用axios调用后端接口，并处理响应数据：

axios.get('/api/user')
    .then(response => {
        // 处理响应数据
        const user = response.data;
        console.log(user);
    })
    .catch(error => {
        // 异常处理
        console.log(error);
    });

以上代码会调用一个/user的接口，并将返回的Json格式数据打印到控制台。如果有异常，会将异常信息打印到控制台。

另一个示例是调用一个XML格式的接口：

axios.get('/api/user', {
        responseType: 'document'
    })
    .then(response => {
        // 处理响应数据
        const xml = response.data;
        console.log(xml);
    })
    .catch(error => {
        // 异常处理
        console.log(error);
    });

以上代码会调用一个/user的接口，并将返回的XML格式数据打印到控制台。如果有异常，会将异常信息打印到控制台。

六、结论

使用axios调用后端接口是一个常见的操作，但可能会遇到一些问题，如跨域、请求头、响应数据处理等。本文提供了一个完整的攻略，详细讲解了如何使用axios解决这些问题，并给出了两个示例。如果按照本文的方法进行操作，应该可以顺利地调用后端接口，并处理响应数据。