Axios

简介

Axios 是一个流行的 JavaScript 库，用于处理 HTTP 请求。它基于 Promise，能够轻松地处理异步操作并从 REST API 获取数据。Axios 可以在浏览器和 Node.js 环境中使用，提供了许多实用功能，例如拦截请求和响应、转换请求和响应数据以及取消请求等。

安装和使用

要使用 Axios，首先需要安装它。如果您使用的是 npm（Node.js 包管理器），可以通过以下命令安装：

npm install axios

安装完毕后，可以在 JavaScript 项目中引入并使用 Axios。以下是一个简单的示例，展示如何使用 Axios 发送 GET 请求：

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Axios 支持所有常见的 HTTP 方法，例如 GET、POST、PUT、DELETE 等,可以根据需要选择相应的方法

发送 POST 请求

const axios = require('axios');

const postData = {
  title: 'Example title',
  content: 'Example content'
};

axios.post('https://api.example.com/posts', postData)
  .then(response => {
    console.log('Data posted successfully:', response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

自定义请求配置

const axios = require('axios');

axios({
  method: 'get',
  url: 'https://api.example.com/data',
  headers: {
    'Authorization': 'Bearer your_token_here',
    'Content-Type': 'application/json'
  },
  timeout: 3000 // 3 秒超时
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

请求拦截器

const axios = require('axios');

// 添加请求拦截器
axios.interceptors.request.use(config => {
  console.log('Request:', config);
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  console.log('Response:', response);
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

这里列举一些实例，具体可以参考官方

Vue3 中引入 Axios

组件中引入

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/items');
      this.items = response.data;
    } catch (error) {
      console.error('Error fetching items:', error);
    }
  }
};
</script>

全局引入

首先在项目的主文件（通常是 main.js 或 main.ts）中，导入 Vue、Axios 和创建 Vue 应用的方法

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

然后创建 Vue 应用并将 Axios 附加到应用的 config.globalProperties 上。这样就可以在任何 Vue 组件中通过 this.$http 使用它

const app = createApp(App);
app.config.globalProperties.$http = axios;

您还可以为 Axios 设置全局配置（可选），例如默认的基本 URL、超时时间等

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 3000; // 3 秒超时

最后，将应用挂载到页面上的 DOM 元素

app.mount('#app');

完成上述步骤后，main.js（或 main.ts）文件应如下所示：

import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 3000;

const app = createApp(App);
app.config.globalProperties.$http = axios;
app.mount('#app');

现在，可以在 Vue 3 组件中直接使用 this.$http 访问 Axios，而无需单独导入。以下是一个在 Vue 3 组件中使用全局 Axios 实例的示例：

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  async created() {
    try {
      const response = await this.$http.get('/items');
      this.items = response.data;
    } catch (error) {
      console.error('Error fetching items:', error);
    }
  }
};
</script>