vue3用什么发起请求

Vue 3 用什么发起请求？ Vue 3 中通常使用 1、Axios 和 2、Fetch API 来发起HTTP请求。这两者各有优缺点，适用于不同的场景。Axios 是一个基于 Promise 的 HTTP 客户端，具有丰富的功能和良好的兼容性。而 Fetch API 是现代浏览器内置的原生方法，提供了简洁的语法和广泛的浏览器支持。

一、AXIOS

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它具有丰富的功能和良好的兼容性，适用于大多数场景。

1、安装和基本使用

首先需要安装 Axios：

npm install axios

然后在 Vue 组件或其他 JavaScript 文件中引入并使用：

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

2、配置

可以通过创建 Axios 实例来设置全局配置，例如：

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

3、拦截器

Axios 拦截器可以在请求或响应被处理之前拦截它们：

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

4、支持并发请求

Axios 提供了 axios.all 方法来处理并发请求：

function getUserAccount() {
  return axios.get('/user/12345');
}
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // Both requests are now complete
  }));

二、FETCH API

Fetch API 是现代浏览器内置的原生方法，用于发起 HTTP 请求。它提供了简洁的语法和广泛的浏览器支持。

1、基本使用

Fetch API 的基本使用方式如下：

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

2、设置请求选项

可以通过第二个参数来设置请求选项，例如方法、头部信息等：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3、处理错误

Fetch API 不会自动处理 HTTP 错误状态（如 404 或 500），需要手动检查 response.ok 属性：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4、取消请求

通过 AbortController 可以取消 Fetch 请求：

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Error:', error);
    }
  });
// 取消请求
controller.abort();

三、AXIOS VS FETCH API

为了更好地理解 Axios 和 Fetch API 的适用场景，我们可以对它们进行一些对比：

特性	Axios	Fetch API
支持浏览器和Node.js	是	否
基于Promise	是	是
拦截器支持	是	否（需要手动实现）
自动处理JSON	是	否（需要手动调用 `response.json()`）
取消请求	是	是（通过 `AbortController`）
并发请求	是（`axios.all`）	否（需要手动实现）
请求/响应转换	是	否

从表格可以看出，Axios 在功能上更为全面，而 Fetch API 更适合轻量级的、无需复杂配置的请求场景。

四、选择指南

1、使用 Axios 的场景

需要在浏览器和 Node.js 中都使用同一套代码。
需要使用拦截器来处理请求或响应。
需要处理并发请求。
需要自动转换 JSON 数据。

2、使用 Fetch API 的场景

只需要在浏览器中发起请求。
需要轻量级的请求处理。
需要原生的、没有外部依赖的解决方案。

五、实例说明

1、使用 Axios 获取数据并更新 Vue 组件状态

<template>
  <div>
    <h1>Data from API</h1>
    <pre>{{ data }}</pre>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

2、使用 Fetch API 获取数据并更新 Vue 组件状态

<template>
  <div>
    <h1>Data from API</h1>
    <pre>{{ data }}</pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }
};
</script>

总结

在 Vue 3 中发起请求可以选择 Axios 或 Fetch API。1、Axios 适用于需要更多功能和配置的复杂场景，如处理并发请求、设置拦截器和自动处理 JSON 数据。2、Fetch API 则适用于轻量级、无需外部依赖的简单场景。根据项目需求选择合适的工具，可以提高开发效率和代码质量。建议在项目初期就确定好使用的工具，并根据需要进行配置和优化，以确保请求处理的稳定性和效率。

相关问答FAQs：

1. Vue3中如何发起请求？

在Vue3中，可以使用axios库来发起请求。首先，需要安装axios库，可以使用npm或者yarn命令进行安装：

npm install axios

然后，在需要发起请求的组件中引入axios：

import axios from 'axios';

接下来，可以使用axios的get、post、put、delete等方法来发起不同类型的请求。例如，使用get方法发起GET请求：

axios.get('/api/users')
  .then(response => {
    // 请求成功的处理逻辑
  })
  .catch(error => {
    // 请求失败的处理逻辑
  });

除了axios，Vue3还提供了fetch函数来发起请求。使用fetch函数发起GET请求的示例代码如下：

fetch('/api/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('请求失败');
    }
  })
  .then(data => {
    // 请求成功的处理逻辑
  })
  .catch(error => {
    // 请求失败的处理逻辑
  });

2. Vue3中如何处理请求的返回数据？

在Vue3中，处理请求的返回数据可以使用then和catch方法，也可以使用async/await语法。在then方法中，可以获取到请求成功后返回的数据，并进行相应的处理逻辑。在catch方法中，可以捕获请求失败的错误，并进行相应的错误处理逻辑。

例如，在使用axios库发起GET请求后，可以通过then方法获取到请求成功后返回的数据：

axios.get('/api/users')
  .then(response => {
    // 请求成功的处理逻辑
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败的处理逻辑
    console.error(error);
  });

使用fetch函数发起GET请求后，可以通过then方法获取到请求成功后返回的数据：

fetch('/api/users')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('请求失败');
    }
  })
  .then(data => {
    // 请求成功的处理逻辑
    console.log(data);
  })
  .catch(error => {
    // 请求失败的处理逻辑
    console.error(error);
  });

除了使用then和catch方法，还可以使用async/await语法来处理请求的返回数据。例如，使用async/await语法处理axios库发起的GET请求：

async function getUsers() {
  try {
    const response = await axios.get('/api/users');
    // 请求成功的处理逻辑
    console.log(response.data);
  } catch (error) {
    // 请求失败的处理逻辑
    console.error(error);
  }
}

getUsers();

3. Vue3中如何处理请求的错误？

在Vue3中，可以使用catch方法或者try/catch语法来处理请求的错误。在catch方法中，可以捕获请求失败的错误，并进行相应的错误处理逻辑。在try/catch语法中，可以使用try块来执行请求，并使用catch块来捕获错误。

例如，在使用axios库发起GET请求时，可以使用catch方法来处理请求的错误：

axios.get('/api/users')
  .then(response => {
    // 请求成功的处理逻辑
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败的处理逻辑
    console.error(error);
  });

使用fetch函数发起GET请求时，可以使用try/catch语法来处理请求的错误：

async function getUsers() {
  try {
    const response = await fetch('/api/users');
    if (response.ok) {
      const data = await response.json();
      // 请求成功的处理逻辑
      console.log(data);
    } else {
      throw new Error('请求失败');
    }
  } catch (error) {
    // 请求失败的处理逻辑
    console.error(error);
  }
}

getUsers();

通过以上的方法，可以在Vue3中灵活地处理请求的错误，提高应用程序的稳定性和用户体验。

文章标题：vue3用什么发起请求，发布者：worktile，转载请注明出处：https://worktile.com/kb/p/3538515