Axios

tititiiti

于 2024-07-21 22:25:02 发布

阅读量331

点赞数 6

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/yin09156507/article/details/140594598

版权

1.什么是Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它是一个流行的工具，用于发送 HTTP 请求和处理响应。Axios 具有以下特点和优点：

Promise Based: Axios 使用 Promise API，允许利用 JavaScript 的 async/await 语法进行异步操作管理，使得代码更加清晰和可读。
浏览器和 Node.js 支持: Axios 可以在浏览器和 Node.js 环境中使用，这使得它非常灵活，可以在前后端均使用统一的 HTTP 请求方式。
拦截请求和响应: Axios 提供了拦截器（interceptors），可以在请求或响应被 then 或 catch 处理之前对它们进行拦截和转换，这提供了一种优雅的方式来处理全局错误处理、请求或响应的转换等。
取消请求: Axios 允许取消请求，这在处理需要用户干预或组件卸载时非常有用。
客户端支持防止CSRF: Axios 提供了内置的 CSRF 保护，可以轻松配置以防止跨站请求伪造攻击。
错误处理: Axios 提供了对 HTTP 错误状态码进行优雅处理的方式，可以自定义处理不同状态码的逻辑。
并发请求处理: Axios 允许同时发出多个并发请求，并且可以等待它们全部完成后再执行后续操作。

Axios 是现代前端开发中常用的 HTTP 客户端库之一，它的简洁性、易用性和强大的功能使得它成为开发人员首选的 HTTP 请求工具之一。

2.axios在vue项目中的使用步骤

2.1 安装

这里只介绍两种安装方式，分别是通过npm和yarn的命令下载，任选其一即可。

# npm
npm install axios
#yarn
yarn add axios

2.2 配置

在main.js文件中引入axios

import axios from 'axios';

2.3 axios的基础应用

1.发送get请求获取数据

methods: {
  getData() {
    axios.get('https://example.com/api/data')
     .then(response => {
        this.data = response.data;
      })
     .catch(error => {
        console.error(error);
      });
  }
}

2.发送post请求获取数据

methods: {
  submitData() {
    axios.post('https://example.com/api/submit', {
      name: 'John Doe',
      age: 25
    })
    .then(response => {
        console.log(response.data);
      })
    .catch(error => {
        console.error(error);
      });
  }
}

3.设置请求头

methods: {
  getDataWithHeaders() {
    axios({
      method: 'get',
      url: 'https://example.com/api/data',
      headers: {
        'Authorization': 'Bearer your_token'
      }
    })
    .then(response => {
        this.data = response.data;
      })
    .catch(error => {
        console.error(error);
      });
  }
}

4.使用拦截器处理请求和响应

// 在 main.js 中全局设置请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前添加加载动画或设置请求头
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

// 全局设置响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据进行统一处理，如隐藏加载动画
  return response;
}, error => {
  // 处理响应错误，如显示错误提示
  return Promise.reject(error);
});