axios封装和使用

axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以用于发送异步请求并处理响应。下面是axios的封装和使用方法：

1. 安装axios：在终端中输入npm install axios命令进行安装。

2. 引入axios：在需要使用axios的文件中，使用import语句引入axios。

3. 封装axios：可以将axios进行封装，以便在多个地方使用。例如：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

4. 使用axios：使用axios发送请求，例如：

import axios from './axios';

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

相关问题

vue3axios封装与使用

Vue 3 是目前最新的 Vue 版本，相信很多人都在使用它。而 axios 则是一个非常优秀的 HTTP 库，已成为前端开发中不可或缺的一部分。在 Vue 3 中使用 axios，我们可以将其进行封装以方便调用。

以下是一个简单的 axios 封装示例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
})

instance.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default instance

在上面的代码中，我们首先使用 `axios.create()` 方法创建了一个 axios 实例，并设置了基本的配置信息，包括请求的基础 URL 和超时时间。

接下来，我们使用 `instance.interceptors.request.use()` 方法添加了一个请求拦截器，用于在请求发送之前做一些自定义的操作，比如添加请求头、修改请求参数等。同样的，我们还可以使用 `instance.interceptors.response.use()` 方法添加一个响应拦截器，在接收到响应数据之后对其进行处理。

最后，我们将封装好的 axios 实例导出，以便在项目中使用。

下面是一个使用封装后的 axios 实例的例子：

import axios from '@/utils/axios'

export function getUserInfo(id) {
  return axios({
    url: '/user/info',
    method: 'get',
    params: { id }
  })
}

在上面的代码中，我们使用 `import` 导入了封装后的 axios 实例，并使用 `axios()` 方法发送了一个 GET 请求，其中包含了请求的 URL、请求方法和请求参数。在这个例子中，我们请求了用户信息，并将用户 ID 作为参数传递给了后端。

这就是一个简单的 axios 封装示例，当然，实际项目中可能会有更多的配置和自定义操作。但是不管怎样，通过 axios 封装，我们可以让我们的项目更加规范、易于维护。

vue2 axios封装与使用

Vue2 中使用 Axios 进行 HTTP 请求是一种常见的做法，因为它可以方便地与 Vue 应用集成，并提供了一致的 API。首先，你需要安装 Axios 和 Axios 插件：

npm install axios axios-vue2-plugin --save

然后，在 Vue 实例的 `created` 或者 `mounted` 生命周期钩子里，安装并配置 Axios 插件：

import axios from 'axios';
import { AxiosInstance } from 'axios';
import axiosPlugin from 'axios-vue2-plugin';

// 创建 Axios 实例并注入到 Vue 实例上
const instance: AxiosInstance = axios.create({
  baseURL: process.env.BASE_API, // 根据需求设置API基础地址
  timeout: 5000, // 设置超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

instance.use(axiosPlugin);

// 将 Axios 实例挂载到 Vue 的原型上
Vue.prototype.$http = instance;

接下来，你可以在组件中通过 `$http` 对象发送请求：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      this.$http.get('your-endpoint') // 替换为你需要的API路径
        .then(response => (this.data = response.data))
        .catch(error => console.error(error));
    },
  },
};
</script>

当你点击按钮时，就会发起 GET 请求，并将返回的数据赋值给 `data` 属性。