总结vue2的axios的常用api使用方法

Vue2中使用axios的常用API包括：

1. axios.get(url[, config])：发送一个GET请求，返回一个Promise对象，可以在then()方法中获取响应数据。

2. axios.post(url[, data[, config]])：发送一个POST请求，返回一个Promise对象，可以在then()方法中获取响应数据。

3. axios.put(url[, data[, config]])：发送一个PUT请求，返回一个Promise对象，可以在then()方法中获取响应数据。

4. axios.delete(url[, config])：发送一个DELETE请求，返回一个Promise对象，可以在then()方法中获取响应数据。

5. axios.create([config])：创建一个axios实例，可以自定义配置。

6. axios.interceptors.request.use(function (config) {})：请求拦截器，可以在请求发送前对请求进行处理。

7. axios.interceptors.response.use(function (response) {})：响应拦截器，可以在响应返回后对响应进行处理。

8. axios.all(iterable)：同时发送多个请求，返回一个Promise对象，可以在then()方法中获取所有请求的响应数据。

以上是Vue2中axios的常用API使用方法。

相关问题

vue对axios的封装使用

对于Vue对axios的封装使用，通常可以按照以下步骤进行：

1. 首先，在项目中安装axios和vue-axios插件。可以通过以下命令来安装：

npm install axios vue-axios

2. 在main.js文件中引入axios和vue-axios，并将其配置为Vue的全局属性：

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

3. 创建一个api.js或者request.js文件，用来封装axios的一些请求方法。这个文件中可以定义一些通用的请求拦截器和响应拦截器，以及一些常用的请求方法。例如：

import axios from 'axios';

// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如添加token到请求头部
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

// 封装GET请求方法
export function get(url, params) {
  return axios.get(url, { params });
}

// 封装POST请求方法
export function post(url, data) {
  return axios.post(url, data);
}

4. 在组件中使用封装好的请求方法。例如，在某个组件的方法中使用GET请求：

import { get } from '@/api';

export default {
  methods: {
    fetchData() {
      get('/api/data').then(response => {
        // 处理接口返回的数据
      }).catch(error => {
        // 处理接口请求失败
      });
    }
  }
}

通过以上步骤，你可以在Vue项目中对axios进行封装和使用，以便于统一管理和处理接口请求。当然，具体的封装方式可以根据项目需求进行调整和扩展。

vue3axios封装与使用

Vue3Axios是一个基于Vue3和Axios的网络请求库。下面是Vue3Axios的封装和使用步骤：

1. 安装Vue3Axios

你可以通过npm或者yarn安装Vue3Axios：

npm install vue3-axios --save

或者

yarn add vue3-axios

2. 封装Vue3Axios

在src目录下新建一个api目录，用于封装Vue3Axios。在api目录下新建一个index.js文件，用于封装Vue3Axios的实例。代码如下：

import axios from 'axios'
import { reactive } from 'vue'

const instance = axios.create({
  baseURL: 'http://localhost:3000', // 接口的基础路径
  timeout: 10000 // 超时时间
})

const state = reactive({
  loading: false // 请求状态
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    state.loading = true // 请求开始，loading为true
    return config
  },
  error => {
    state.loading = false // 请求出错，loading为false
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    state.loading = false // 响应结束，loading为false
    return response
  },
  error => {
    state.loading = false // 响应出错，loading为false
    return Promise.reject(error)
  }
)

export default {
  get(url, params) {
    return instance.get(url, { params })
  },

  post(url, data) {
    return instance.post(url, data)
  },

  put(url, data) {
    return instance.put(url, data)
  },

  delete(url) {
    return instance.delete(url)
  },

  state // 请求状态
}

在这段代码中，我们使用了Vue3的reactive函数来实现数据响应式，同时封装了四个常用的网络请求方法，并且添加了请求和响应拦截器来处理请求状态。

3. 使用Vue3Axios

在组件中使用封装好的Vue3Axios。代码如下：

<template>
  <div>
    <div v-if="api.state.loading">正在加载...</div>
    <div v-else>{{ result }}</div>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data() {
    return {
      result: ''
    }
  },

  mounted() {
    api.get('/api/test').then(res => {
      this.result = res.data
    })
  }
}
</script>

在组件中，我们通过导入封装好的Vue3Axios实例，来进行网络请求。在请求过程中，我们可以使用reactive函数封装的state对象来获取请求状态。