vue axios全攻略

Vue.js 是一个流行的 JavaScript 框架，允许您构建响应式和交互式的 Web 应用程序。而 Axios 是一个流行的基于 Promise 的 HTTP 库，可用于在浏览器和 Node.js 中发送 HTTP 请求。

在 Vue.js 中使用 Axios 可以很容易地与服务器进行通信并处理 API 请求和响应。下面是一个使用 Axios 的示例：

1. 安装 Axios

在使用 Axios 之前，需要先安装它。您可以使用 npm 或 yarn 进行安装。在命令行中运行以下命令：

npm install axios

或

yarn add axios

2. 引入 Axios

在您的 Vue.js 组件中，您需要引入 Axios。在您的组件的 script 标签中添加以下代码：

import axios from 'axios'

3. 发送 GET 请求

要发送 GET 请求，请使用 Axios 的 get() 方法。例如，以下代码将向 https://jsonplaceholder.typicode.com/posts 发送 GET 请求：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

4. 发送 POST 请求

要发送 POST 请求，请使用 Axios 的 post() 方法。例如，以下代码将向 https://jsonplaceholder.typicode.com/posts 发送 POST 请求：

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

5. 发送 PUT 请求

要发送 PUT 请求，请使用 Axios 的 put() 方法。例如，以下代码将向 https://jsonplaceholder.typicode.com/posts/1 发送 PUT 请求：

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

6. 发送 DELETE 请求

要发送 DELETE 请求，请使用 Axios 的 delete() 方法。例如，以下代码将删除 https://jsonplaceholder.typicode.com/posts/1：

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

7. 配置 Axios

您可以使用 Axios 的拦截器来添加请求和响应的拦截器。例如，以下代码将在每个 Axios 请求中添加一个 Authorization 标头：

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

8. 处理 Axios 错误

当与服务器通信时，可能会遇到错误。您可以使用 Axios 的 catch() 方法来处理这些错误。例如，以下代码将处理 404 错误：

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    if (error.response) {
      console.log(error.response.status)
    } else {
      console.log(error.message)
    }
  })

以上是使用 Axios 的基本步骤和示例。希望这些信息对您有所帮助。