Axios
Axios

Axios - 引入

# Axios - 引入

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了简单易用的 API，用于发送 HTTP 请求，并处理响应数据。Axios 支持 GET、POST、PUT、DELETE 等多种 HTTP 请求方法，并提供了请求和响应拦截器、取消请求、自动转换响应数据等功能。

前言

Axios中文官方文档：http://www.axios-js.com/ (opens new window)

# 一、在浏览器中导入

在 HTML 文件中，通过 <script> 标签引入 Axios 的 CDN 链接，这样就可以在网页中使用 Axios 进行 HTTP 请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios Example</title>
    <!-- 通过 CDN 引入 axios 库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        // 可以在这里使用 axios 进行 HTTP 请求
        // 例如，发送一个 GET 请求到指定 URL
        axios.get('https://api.example.com/data')
            .then(function (response) {
                // 请求成功后的处理逻辑
                console.log(response.data); // 输出返回的数据
            })
            .catch(function (error) {
                // 请求失败时的处理逻辑
                console.error('请求失败:', error);
            });
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 二、在 Node.js 环境中导入

在 Node.js 环境中使用 Axios，需要首先通过 npm 安装 Axios，然后在 JavaScript 文件中导入它。

使用 npm 命令安装 Axios：

npm install axios

# 在 Node.js 中使用

在 JavaScript 文件中导入 Axios，可以使用 CommonJS 或 ES6 模块语法。

使用 CommonJS 模块语法：

// 使用 require 导入 axios 模块
const axios = require('axios');

// 使用 axios 发送 GET 请求
axios.get('https://api.example.com/data')
    .then(function (response) {
        // 请求成功后的处理逻辑
        console.log(response.data); // 输出返回的数据
    })
    .catch(function (error) {
        // 请求失败时的处理逻辑
        console.error('请求失败:', error);
    });

1
2
3
4
5
6
7
8
9
10
11
12
13

使用 ES6 模块语法：

// 使用 import 导入 axios 模块
import axios from 'axios';

// 使用 axios 发送 GET 请求
axios.get('https://api.example.com/data')
    .then((response) => {
        // 请求成功后的处理逻辑
        console.log(response.data); // 输出返回的数据
    })
    .catch((error) => {
        // 请求失败时的处理逻辑
        console.error('请求失败:', error);
    });

1
2
3
4
5
6
7
8
9
10
11
12
13

# 三、在 Vue 项目中导入

在 Vue项目中，可以通过 npm 安装 Axios，然后在组件中导入和使用它。

在 Vue 项目中安装 Axios 和 Vue-Axios：

npm install --save axios vue-axios

axios：这是实际用于发送 HTTP 请求的库。
vue-axios：这是一个桥接插件，用于将 Axios 与 Vue 集成，以便更方便地在 Vue 组件中使用 Axios。

# 全局导入 Axios

在 Vue.js 项目中，全局导入 Axios 可以在项目的入口文件（ main.js）中进行，这样在所有组件中都可以直接使用 Axios。

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios' // 从 'axios' 导入 axios 模块
import VueAxios from 'vue-axios' // 从 'vue-axios' 导入 VueAxios 插件

// 使用 Vue.use 方法将 VueAxios 和 axios 安装到 Vue 实例中
// 这会将 axios 添加到 Vue 实例的原型链上，并通过 this.$http 和 this.axios 访问
Vue.use(VueAxios, axios)

new Vue({
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

vue-axios 是一个帮助插件，它让你可以使用 Vue.use() 来安装 Axios。
安装后，Axios 将可通过 this.$http 和 this.axios 在组件中使用。

# 局部导入 Axios

在需要使用 Axios 的 Vue 组件中局部导入，只在该组件中使用。

<template>
  <div>
    <!-- 在模板中展示获取的数据 -->
    <p v-if="data">{{ data }}</p>
    <p v-else>正在加载数据...</p>
  </div>
</template>

<script>
// 在组件内导入 axios 模块
import axios from 'axios';

export default {
  data() {
    return {
      data: null // 存储获取的数据
    };
  },
  created() {
    // 使用 axios 发送 GET 请求
    axios.get('https://api.example.com/data')
      .then((response) => {
        // 将返回的数据赋值给 data
        this.data = response.data;
      })
      .catch((error) => {
        // 处理请求失败的逻辑
        console.error('请求失败:', error);
      });
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

通过这两种方式，可以选择性地在 Vue.js 应用中全局或局部使用 Axios。

编辑此页

上次更新: 2024/12/28, 18:32:08

Axios - 发送请求→