【三十天精通Vue 3】第二十五天 Vue3 与 Axios 后端数据交互

请添加图片描述

✅创作者：陈书予
🎉个人主页：陈书予的个人主页
🍁陈书予的个人社区，欢迎你的加入: 陈书予的社区
🌟专栏地址: 三十天精通 Vue 3

文章目录

- 引言
- 一、Vue3 与 Axios 概述
- 二、Axios 安装与基本使用
- - 2.1 安装 Axios
  - 2.2 发送 GET 请求
  - 2.3 发送 POST 请求
  - 2.4 发送 PUT 请求
  - 2.5 发送 DELETE 请求
- 三、Vue3 中使用 Axios 获取数据
- - 3.1 使用 Axios 获取数据
  - 3.2 渲染数据
  - 3.3 处理错误
- 四、Axios 配置项详解
- - 4.1 baseURL
  - 4.2 表头
  - 4.3 参数
  - 4.4超时
  - 4.5 withCredentials
  - 4.6 响应类型
  - 4.7 transformRequest 和 transformResponse
  - 4.8 xsrfCookieName 和 xsrfHeaderName
  - 4.9 验证状态
- 五、Axios 拦截器详解
- - 5.1 请求拦截器
  - 5.2 响应拦截器
- 六、Axios 并发请求详解
- - 6.1 同时发送多个请求
  - 6.2 执行顺序
- 七、Axios 取消请求详解
- - 7.1 为什么需要取消请求
  - 7.2 取消请求的方法
  - 7.3 如何使用取消请求
- 八、Axios 封装和实践
- - 8.1 封装 Axios
  - 8.2 实践案例

引言

Axios是一个流行的基于Promise的HTTP客户端，它可以在浏览器和Node.js中使用。Vue.js是一个流行的JavaScript框架，它提供了一套易于使用的API和工具来构建交互式UI。在Vue.js中使用Axios可以轻松地与服务器通信并获取数据。本篇文章将介绍如何在Vue3中使用Axios进行HTTP请求，并详细介绍Axios的安装、基本使用、配置项、拦截器、并发请求和取消请求。

一、Vue3 与 Axios 概述

Vue3是Vue.js的最新版本，它提供了一些新的功能和改进，例如Composition API、性能优化和TypeScript支持。Axios是一个流行的HTTP客户端，它提供了许多强大的功能，例如拦截器、并发请求和取消请求。Vue3和Axios可以很好地结合使用，以便在Vue3应用程序中轻松地进行HTTP请求和数据获取。

二、Axios 安装与基本使用

2.1 安装 Axios

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

npm install axios

或

yarn add axios

2.2 发送 GET 请求

使用Axios发送GET请求非常简单。可以使用Axios.get()方法来发送GET请求，并指定URL。例如，以下代码将使用Axios获取JSON数据：

import axios from 'axios';

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

2.3 发送 POST 请求

使用Axios发送POST请求也非常简单。可以使用Axios.post()方法来发送POST请求，并指定URL和要发送的数据。例如，以下代码将使用Axios将数据发送到服务器：

import axios from 'axios';

axios.post('https://jsonplaceholder.typicode.com/todos', {
    title: 'foo',
    completed: false
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

2.4 发送 PUT 请求

使用Axios发送PUT请求也非常简单。可以使用Axios.put()方法来发送PUT请求，并指定URL和要发送的数据。例如，以下代码将使用Axios将数据更新到服务器：

import axios from 'axios';

axios.put('https://jsonplaceholder.typicode.com/todos/1', {
    title: 'foo',
    completed: true
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

2.5 发送 DELETE 请求

使用Axios发送DELETE请求也非常简单。可以使用Axios.delete()方法来发送DELETE请求，并指定URL。例如，以下代码将使用Axios从服务器删除数据：

import axios from 'axios';

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

三、Vue3 中使用 Axios 获取数据

3.1 使用 Axios 获取数据

在Vue3中使用Axios获取数据非常简单。可以使用Axios.get()方法来获取数据，并将其存储在Vue3组件的数据属性中。例如，以下代码将使用Axios获取JSON数据并将其存储在Vue3组件的todos数据属性中：

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

export default {
  setup() {
    const state = reactive({
      todos: []
    });

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

    return {
      state
    };
  }
};

3.2 渲染数据

获取数据后，可以在Vue3组件中使用数据属性来渲染数据。例如，以下代码将使用Vue3的v-for指令来渲染todos数据属性中的所有待办事项：

<template>
  <div>
    <ul>
      <li v-for="todo in state.todos" :key="todo.id">
        {{ todo.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    state: Object
  }
};
</script>

3.3 处理错误

在使用Axios获取数据时，可能会出现错误。例如，服务器可能返回错误的响应代码或请求可能超时。为了处理这些错误，可以使用Axios的.catch()方法来捕获错误并采取相应的措施。例如，以下代码将使用Axios获取JSON数据，如果出现错误，则将错误记录在控制台中：

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

export default {
  setup() {
    const state = reactive({
      todos: []
    });

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

    return {
      state
    };
  }
};

四、Axios 配置项详解

Axios提供了许多配置项，可以根据需要进行配置。以下是Axios配置项的详细说明：

4.1 baseURL

baseURL是在发出请求时将自动添加到URL前面的基本URL。例如，如果将baseURL设置为https://api.example.com，则在发送请求时，Axios将自动将https://api.example.com添加到请求的URL前面。以下是如何设置baseURL：

axios.defaults.baseURL = 'https://api.example.com';

4.2 表头

headers是一个包含请求头的对象。以下是如何设置headers：

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

4.3 参数

params是一个包含请求参数的对象。以下是如何设置params：

axios.get('/user', {
  params: {
    ID: 12345
  }
})

4.4超时

timeout是请求超时的毫秒数。如果请求在超时时间内没有完成，则会被取消。以下是如何设置timeout：

axios.get('/user', {
  timeout: 1000
})

4.5 withCredentials

withCredentials是一个布尔值，用于指定是否发送凭据（例如cookie或授权标头）的标志。如果要发送凭据，则将其设置为true。以下是如何设置withCredentials：

axios.defaults.withCredentials = true;

4.6 响应类型

responseType是请求的响应类型。以下是如何设置responseType：

axios.get('/user', {
  responseType: 'json'
})

4.7 transformRequest 和 transformResponse

transformRequest 和 transformResponse 是两个配置项，它们的值是一个数组或者是一个函数。其中 transformRequest 允许你在将请求数据发送到服务器之前对其进行修改，这只适用于请求方法 put、post 和 patch。如果值是数组，则数组中的最后一个函数必须返回一个字符串或者一个 Buffer，否则将抛出一个错误。transformResponse 允许你在传递给 then/catch 前，修改响应数据。它也可以是一个数组或者是一个函数。如果值是数组，则数组中的每个函数都将被调用。

4.8 xsrfCookieName 和 xsrfHeaderName

xsrfCookieName 和 xsrfHeaderName 是用于防止跨站请求攻击（XSRF）的配置项。xsrfCookieName 表示存储 XSRF 令牌的 cookie 的名称，xsrfHeaderName 表示将 XSRF 令牌添加到 HTTP 头中的名称。默认情况下，Axios 将使用 XSRF-TOKEN 作为 cookie 的名称，并使用 X-XSRF-TOKEN 作为 HTTP 头的名称。

4.9 验证状态

validateStatus 是一个函数，用于确定是否应该解析响应。如果该函数返回 true，则解析响应，否则将拒绝响应。默认情况下，Axios 将解析所有响应。以下是一个示例：

axios.get('https://jsonplaceholder.typicode.com/todos', {
  validateStatus: function (status) {
    return status < 500; // Reject only if the status code is greater than or equal to 500
  }
})

这将拒绝所有状态码大于等于 500 的响应。

五、Axios 拦截器详解

Axios 提供了请求和响应拦截器，它们允许您在请求和响应被发送或接收之前，对它们进行拦截和修改。以下是拦截器的详细说明：

5.1 请求拦截器

请求拦截器允许您在请求被发送之前，对其进行拦截和修改。以下是一个示例：

axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  config.headers['Authorization'] = 'Bearer ' + getToken();
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

在这个例子中，我们添加了一个请求拦截器，它将在每个请求上添加一个 Authorization 头。

5.2 响应拦截器

响应拦截器允许您在接收到响应之前，对其进行拦截和修改。以下是一个示例：

axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

在这个例子中，我们添加了一个响应拦截器，它将在每个响应上执行一些操作。

六、Axios 并发请求详解

6.1 同时发送多个请求

Axios提供了axios.all()和axios.spread()两个方法用于处理并发请求，可以实现在多个请求都完成后再执行一些逻辑。

axios.all()方法接收一个可迭代的对象作为参数，该对象中的每个元素都是一个Promise对象，返回一个新的Promise对象，当所有Promise对象都成功时，新的Promise对象才会成功。

例如，以下代码同时发送两个GET请求，当两个请求都成功时，输出两个请求的响应数据：

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/todos/1'),
  axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
  .then(axios.spread((response1, response2) => {
    console.log(response1.data);
    console.log(response2.data);
  }))
  .catch(error => {
    console.log(error);
  });

axios.spread()方法接收一个回调函数作为参数，该函数的参数是一个数组，数组中的每个元素是一个请求的响应数据。在axios.all()方法的then()方法中使用axios.spread()方法可以将响应数据拆分开来，方便处理。

6.2 执行顺序

在并发请求中，Axios默认使用的是同时发送多个请求的方式，而不是按照发送请求的顺序依次发送请求。

如果需要按照发送请求的顺序依次发送请求，可以使用axios.all()方法的返回值按顺序处理请求的响应数据。例如，以下代码按照发送请求的顺序依次输出响应数据：

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/todos/1'),
  axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
  .then(responses => {
    responses.forEach(response => {
      console.log(response.data);
    });
  })
  .catch(error => {
    console.log(error);
  });

七、Axios 取消请求详解

7.1 为什么需要取消请求

在实际开发中，有时需要取消正在进行的请求，例如用户在输入框中连续输入，每次输入都会发送一个请求，如果不及时取消之前的请求，会导致请求过多，浪费网络资源和服务器资源。

7.2 取消请求的方法

Axios提供了CancelToken和cancel两个方法用于取消请求。CancelToken是一个工厂函数，用于创建取消令牌，cancel方法用于取消请求。

以下是使用CancelToken和cancel方法取消请求的示例代码：

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/todos', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  });

source.cancel('Canceled by the user');

在以上代码中，使用axios.CancelToken.source()方法创建一个CancelToken对象和一个cancel方法。将CancelToken对象的token属性作为请求的cancelToken参数，当需要取消请求时，调用cancel方法即可。

7.3 如何使用取消请求

在实际开发中，有时需要取消正在进行的请求，例如用户在输入框中连续输入，每次输入都会发送一个请求，如果不及时取消之前的请求，会导致请求过多，浪费网络资源和服务器资源。Axios提供了CancelToken和cancel两个方法用于取消请求。

以下是使用CancelToken和cancel方法取消请求的示例代码：

创建CancelToken对象和cancel方法：

const source = axios.CancelToken.source();

将CancelToken对象的token属性作为请求的cancelToken参数：

axios.get('https://jsonplaceholder.typicode.com/todos', {
  cancelToken: source.token
})

当需要取消请求时，调用cancel方法：
```
source.cancel('Canceled by the user');
```

完整的代码示例：

import axios from 'axios';

const source = axios.CancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/todos', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  });

source.cancel('Canceled by the user');

在上面的代码中，使用axios.isCancel(error)方法判断请求是否被取消，并输出相应的信息。

需要注意的是，在使用CancelToken和cancel方法取消请求时，需要在请求发送前调用source.token，否则会抛出一个未定义的错误。同时，需要在请求结束后，取消CancelToken对象和cancel方法的引用，以避免内存泄漏。

八、Axios 封装和实践

8.1 封装 Axios

在实际项目中，我们通常需要对 Axios 进行封装，以便于统一处理请求的错误、请求头、请求参数等信息，同时也方便后期维护和更新。

以下是一个简单的 Axios 封装示例：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

service.interceptors.request.use(
  config => {
    // 在请求发送前做一些处理
    config.headers['Authorization'] = getToken();
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    // 在响应数据返回前做一些处理
    return response.data;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

export default service;

在上述代码中，我们通过 axios.create() 方法创建了一个 Axios 实例，并设置了基本的 baseURL 和 timeout。同时，我们也添加了请求和响应拦截器，用于处理请求和响应的错误信息。

通过封装后的 Axios，我们可以在 Vue3 项目中使用以下方法进行 API 请求：

import request from '@/utils/request';

request({
  url: '/user',
  method: 'get',
  params: {
    id: 1
  }
}).then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

8.2 实践案例

在 Vue3 项目中，我们可以通过封装后的 Axios 进行 API 请求，同时也可以将 Axios 的实例作为 Vue3 的插件进行注册，方便在 Vue3 组件中使用。

以下是一个简单的 Axios 插件示例：

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

service.interceptors.request.use(
  config => {
    // 在请求发送前做一些处理
    config.headers['Authorization'] = getToken();
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    // 在响应数据返回前做一些处理
    return response.data;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

const plugin = {
  install: (app, options) => {
    app.config.globalProperties.$axios = service;
  }
};

export default plugin;

在上述代码中，我们通过 app.config.globalProperties.$axios 将 Axios 实例注入到了 Vue3 中，并将其作为全局属性进行使用。

在 Vue3 项目中，我们可以通过以下方法进行插件注册：

import axios from '@/plugins/axios';

createApp(App).use(axios).mount('#app');

在 Vue3 组件中，我们可以通过以下方法进行 API 请求：

export default {
  mounted() {
    this.$axios({
      url: '/user',
      method: 'get',
      params: {
        id: 1
      }
    }).then(data => {
      console.log(data);
    }).catch(error => {
      console.log(error);
    });
  }
}