vue高效使用axios

在Vue中使用Axios是一种常见的网络请求方式。Axios是一个基于Promise的HTTP客户端，它可以用于在浏览器和Node.js环境中发送HTTP请求。以下是在Vue项目中使用Axios的基本步骤：

安装Axios

首先，确保你的项目中已经安装了Vue.js。然后，通过npm或者yarn来安装Axios：

npm install axios
# 或
yarn add axios

引入Axios

在你的Vue组件中，你需要引入Axios：

import axios from 'axios';

发起HTTP请求

在需要发送HTTP请求的地方，你可以使用Axios的各种方法，如axios.get、axios.post、axios.put等等。以下是一个简单的例子：

axios.get('https://api.example.com/data').then(response => {
    // 请求成功处理
    console.log(response.data);
}).catch(error => {
    // 请求错误处理
    console.error(error);
});

处理响应

Axios返回的是一个Promise，你可以使用.then和.catch来处理成功和失败的情况。响应数据位于response.data中。

使用async/await

你也可以使用ES6的async/await来更清晰地处理异步请求：

async getData(){
    try {
        const response = await axios.get('https://api..com/data');
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
}

设置默认配置（可选）

你可以在应用中设置Axios的默认配置，如base URL、拦截器等。这些设置可以在Vue实例化Axios时进行配置。

const instance = axios.create({
  baseURL: 'https://api.example.com',
  // 其他配置项
});

跨域

Vue CLI提供了一个配置项来设置代理，以便在开发环境中解决跨域问题。

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com', // 实际的 API 地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 将请求路径中的 /api 替换为空
        }
      }
    }
  }
};

所有以 /api 开头的请求会被代理到 https://api.example.com。前端使用相对路径 /api 来访问后端接口即可。

axios.get('/api/data').then(response => {
    // 处理响应
}).catch(error => {
    // 处理错误
});

注意：以上代理配置只在开发环境中生效，生产环境下处理跨域问题，需要服务器端做反向代理或者设置允许跨域的header头等跨域操作。