vue.js 如何发送请求

在 Vue.js 中发送请求可以通过以下几种方式：1、使用 Axios 库，2、使用 Fetch API。 这两种方式都是常用且有效的方式来进行网络请求，下面将详细介绍它们的使用方法。

一、使用 AXIOS 库

Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它能够拦截请求和响应，转换请求数据和响应数据，以及取消请求。以下是如何在 Vue.js 项目中使用 Axios 发送请求的步骤：

安装 Axios
```
npm install axios
```
在 Vue 组件中导入 Axios
```
import axios from 'axios';
```

发送 GET 请求

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

发送 POST 请求

axios.post('https://api.example.com/data', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

设置全局默认配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

拦截请求和响应

axios.interceptors.request.use(config => {
  // Do something before request is sent
  return config;
}, error => {
  // Do something with request error
  return Promise.reject(error);
});
axios.interceptors.response.use(response => {
  // Do something with response data
  return response;
}, error => {
  // Do something with response error
  return Promise.reject(error);
});

二、使用 FETCH API

Fetch API 是现代浏览器中原生支持的用于发起网络请求的接口。它基于 Promise，提供了更简单的操作方式和更强大的功能。以下是如何在 Vue.js 项目中使用 Fetch API 发送请求的步骤：

发送 GET 请求

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

发送 POST 请求

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      key1: 'value1',
      key2: 'value2'
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

处理请求和响应的错误

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('There was an error!', error);
  });

设置请求超时

const fetchWithTimeout = (url, options, timeout = 7000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Timeout')), timeout)
    )
  ]);
};
fetchWithTimeout('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

三、AXIOS 与 FETCH API 的对比

特性	Axios	Fetch API
支持浏览器兼容性	支持低版本浏览器	仅支持现代浏览器
请求取消	原生支持请求取消	需要通过 AbortController 手动实现
拦截器支持	支持请求和响应拦截器	需要手动实现拦截器功能
请求配置	支持全局配置、局部配置以及实例化配置	需要在每次请求时手动设置请求头和其他配置
文件上传	支持文件上传，通过 FormData 处理文件数据	需要手动设置请求头和处理文件数据
错误处理	提供了更好的错误处理机制，能够直接捕获 HTTP 错误和网络错误	需要手动捕获 HTTP 错误，fetch 默认仅会抛出网络错误

四、总结与建议

在 Vue.js 中发送请求有多种方式，使用 Axios 和 Fetch API 是最常见的两种方法。根据项目需求和团队习惯选择合适的方式：

如果需要兼容低版本浏览器、使用拦截器、取消请求等功能，建议使用 Axios。
如果追求轻量化和原生支持，可以选择 Fetch API。

无论选择哪种方式，都要注意处理错误和异常情况，保证应用的稳定性和用户体验。希望这些信息能帮助你在 Vue.js 项目中更好地发送请求并处理响应。

相关问答FAQs：

1. Vue.js如何发送GET请求？

在Vue.js中发送GET请求非常简单，可以使用Vue的内置方法axios或者fetch来发送GET请求。下面是两种常见的方法：

使用axios发送GET请求：

// 导入axios
import axios from 'axios';

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

使用fetch发送GET请求：

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

2. Vue.js如何发送POST请求？

发送POST请求与发送GET请求类似，只是在发送请求时需要指定请求的方法为POST，并且需要传递请求体数据。下面是两种常见的方法：

使用axios发送POST请求：

// 导入axios
import axios from 'axios';

// 发送POST请求
axios.post('/api/data', { name: 'John', age: 25 })
  .then(response => {
    // 请求成功处理
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败处理
    console.error(error);
  });

使用fetch发送POST请求：

// 发送POST请求
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 25 })
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('请求失败');
    }
  })
  .then(data => {
    // 请求成功处理
    console.log(data);
  })
  .catch(error => {
    // 请求失败处理
    console.error(error);
  });

3. Vue.js如何发送带参数的请求？

发送带参数的请求在实际开发中非常常见，可以通过在URL中添加参数或者在请求体中传递参数来实现。下面是两种常见的方法：

在URL中添加参数：

// 使用axios发送带参数的GET请求
axios.get('/api/data?param1=value1&param2=value2')
  .then(response => {
    // 请求成功处理
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败处理
    console.error(error);
  });

在请求体中传递参数：

// 使用axios发送带参数的POST请求
axios.post('/api/data', { param1: 'value1', param2: 'value2' })
  .then(response => {
    // 请求成功处理
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败处理
    console.error(error);
  });

使用以上方法，你可以轻松地在Vue.js中发送各种类型的请求，并处理返回的数据。记得在发送请求之前，先安装相应的依赖包，如axios或者fetch。

文章标题：vue.js 如何发送请求，发布者：不及物动词，转载请注明出处：https://worktile.com/kb/p/3657394