如何在Vue项目中使用Axios进行异步HTTP请求？

Axios.js 与 Vue 的结合使用

一、

Axios是一个基于Promise的HTTP库，用于浏览器和node.js中发起请求，它支持许多强大的功能，如拦截请求和响应、取消请求、自动转换JSON数据等，是Vue项目中处理HTTP请求的首选库，Vue.js是一个渐进式JavaScript框架，用于构建用户界面，在Vue项目中，Axios常用于前后端的数据交互，解决跨域问题，并简化HTTP请求的处理。

二、安装与配置Axios

1. 安装Axios

可以通过npm或yarn安装Axios：

npm install axios
或者
yarn add axios

2. 全局引入Axios

在Vue项目的入口文件（如main.js）中进行配置：

import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
Vue.prototype.$axios = axios;
new Vue({
  render: h => h(App),
}).$mount('#app');

这样配置后，所有组件都可以通过this.$axios访问Axios实例。

三、GET请求与POST请求的实现

1. GET请求

在组件中使用Axios进行GET请求非常简单：

export default {
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    this.$axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
  }
};

2. POST请求

POST请求同样简单：

export default {
  data() {
    return {
      info: null,
    };
  },
  methods: {
    sendPostRequest() {
      this.$axios.post('https://jsonplaceholder.typicode.com/posts', {
        title: 'foo',
        body: 'bar',
        userId: 1,
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
    }
  }
};

在模板中调用sendPostRequest方法即可发送POST请求。

四、跨域问题的解决

跨域是指浏览器阻止一个源的文档或脚本尝试与另一个源交互的情况，为了在开发环境中解决跨域问题，可以在Vue CLI项目中通过配置代理来实现，在vue.config.js文件中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端API地址
        changeOrigin: true,
        pathRewrite: { '^/api': '' } // 重写路径，将/api替换为空字符串
      }
    }
  }
};

在生产环境中，需要结合后端设置CORS或其他跨域解决方案。

五、拦截器的使用

拦截器可以用于在请求或响应被处理前进行一些操作，添加请求头或处理错误：

// 添加请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization =Bearer ${token};
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        console.error('Unauthorized access, redirecting to login');
        break;
      case 404:
        console.error('Resource not found');
        break;
      default:
        console.error('An unexpected error occurred');
    }
  } else {
    console.error('Network error, please try again later');
  }
  return Promise.reject(error);
});

这些拦截器会在每个请求和响应时自动执行。

1. 归纳

Axios在Vue项目中的使用非常灵活，通过简单的配置即可实现HTTP请求、跨域问题解决以及请求和响应的拦截，本文详细介绍了如何在Vue项目中安装和配置Axios，如何进行GET和POST请求，如何解决跨域问题，以及如何使用拦截器，希望这些内容能帮助开发者更好地利用Axios进行前后端的数据交互。

2. 相关问题与解答

问：如何在Vue项目中封装Axios？

答：在Vue项目中封装Axios可以通过创建一个专门的文件（如src/util/axios.js）来实现，首先创建Axios实例，然后添加请求和响应拦截器，最后导出该实例以便在项目中使用，具体代码如下：

import axios from 'axios';
import { ElMessage, ElLoading } from 'element-plus';
import { ref } from 'vue';
const instance = axios.create({
  baseURL: '/api',
  timeout: 3000,
});
let loadCount = 0;
let loadingInstance = ref(null);
const addLoading = () => {
  loadCount++;
  if (loadCount === 1) {
    loadingInstance.value = ElLoading.service({ fullscreen: false, text: '请求中...' });
  }
};
const cancelLoading = () => {
  loadCount--;
  if (loadCount === 0) {
    loadingInstance.value?.close();
  }
};
instance.interceptors.request.use(config => {
  addLoading();
  return config;
}, error => {
  cancelLoading();
  return Promise.reject(error);
});
instance.interceptors.response.use(res => {
  cancelLoading();
  return res;
}, error => {
  cancelLoading();
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        ElMessage.error('请求错误');
        break;
      case 401:
        ElMessage.error('未授权，请重新登录');
        break;
      case 403:
        ElMessage.error('登录过期，请重新登录');
        break;
      case 404:
        ElMessage.error('请求错误，未找到相应的资源');
        break;
      case 408:
        ElMessage.error('请求超时');
        break;
      case 500:
        ElMessage.error('服务器错误');
        break;
      case 504:
        ElMessage.error('网络超时');
        break;
      default:
        ElMessage.error('请求失败');
    }
    return Promise.reject(error);
  } else {
    if (JSON.stringify(error).includes('timeout')) {
      error.code = 'TIMEOUT';
      error.message = '服务器响应超时';
    } else {
      error.message = '未知错误';
    }
    return Promise.reject(error);
  }
});
export default instance;

各位小伙伴们，我刚刚为大家分享了有关“axios.js vue”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！