Vue中使用axios的完整指南

一、axios在vue中的使用慕课笔记

Axios 是一个基于 Promise 的 HTTP 库，可用于浏览器和 Node.js，它是一种简单，易用且兼容性好的发起HTTP请求的方案。在Vue中使用Axios，可以轻松地发起请求，并且可以方便地将返回的数据渲染到页面上。

在Vue项目中使用Axios需要先进行安装，打开终端输入：

npm install axios --save

安装成功之后，我们可以在Vue组件中引入Axios：

import axios from 'axios'

我们可以通过Axios创建一个 HTTP 请求的实例，该实例可以通过设置全局参数，如请求头部，超时时间等等，以便我们在项目中统一处理这些参数。例如：

// 创建axios实例
const service = axios.create({
  baseURL: 'https://api.example.com', // api 的 base_url
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

二、在vue中怎么使用axios

使用Axios时，我们通常在Vue组件的 methods 生命周期中进行调用，这样我们可以在页面上发送HTTP请求并接收返回数据。例如：

methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => { console.log(response) })
      .catch(error => { console.log(error) })
  }
}

在上面的方法中，我们使用get方法请求/api/data 这个URL，然后使用.then捕获成功响应，并使用.catch捕获错误响应。通过这种方式，我们可以方便地在Vue中使用Axios来发起HTTP请求，并处理返回的数据。

三、axios在vue中的使用选取

1.发送GET请求

使用Axios发送GET请求时，我们可以通过传递参数来指定请求的URL，例如：

axios.get('/api/data', { params: { id: 1 } })
  .then(response => { console.log(response) })
  .catch(error => { console.log(error) })

在上面的示例中，我们通过params传递了一个名为 id 的参数，该参数的值为1。Axios会将参数自动编码，并将其添加到请求的URL后面。

2.发送POST请求

使用Axios发送POST请求时，我们可以通过传递data参数来设置请求的数据，例如：

axios.post('/api/create', { 
  name: 'Tom',
  age: 18 
})
.then(response => { console.log(response) })
.catch(error => { console.log(error) })

在上面的示例中，我们通过传递一个对象作为第二个参数，将数据发送到了服务器，服务器会将该数据解析并进行操作。

3.设置请求头

我们可以通过Axios设置HTTP请求头，这在某些时候是非常有用的。例如：

axios({
  method: 'get',
  url: '/api/data',
  headers: {'X-Requested-With': 'XMLHttpRequest'}
})
  .then(response => { console.log(response) })
  .catch(error => { console.log(error) })

在上面的示例中，我们在请求头中指定了一个 X-Requested-With 属性，以便服务器了解请求是由 Ajax 发送的。

4.设置请求超时时间

我们可以通过设置Axios实例的timeout属性来指定请求的超时时间。例如：

// 创建axios实例
const service = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000 // 请求超时时间
})

在上面的示例中，我们将timeout属性设为5000毫秒，表示请求如果超过5秒还没有响应，则认为请求超时。

5.使用拦截器

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)
})

在上面的示例中，我们使用了请求拦截器和响应拦截器来处理请求和响应，这样我们可以方便地对请求和响应进行统一的处理。

总结

本文主要介绍了在Vue中使用Axios的使用方法。我们可以通过Axios方便地发起HTTP请求，并处理返回的数据。通过设置Axios实例的全局参数，我们可以统一处理请求头，超时时间等等。此外，Axios还提供了拦截器的功能，以便我们处理请求和响应。希望这篇文章可以帮助你更好地使用Vue和Axios进行开发。

原创文章，作者：XDKDP，如若转载，请注明出处：https://www.506064.com/n/370322.html