axios的使用总结

一、Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。在 Vue 项目中，它主要用于发送 HTTP 请求来获取数据（如从 API 获取数据）或者提交数据（如用户登录、注册等表单数据）。

二、安装 Axios

• 在 Vue 项目中，可以通过 npm 或者 yarn 来安装 Axios。
• 使用 npm 安装：npm install axios。
• 使用 yarn 安装：yarn add axios。

三、基本使用方法

1. 引入 Axios

• 在需要使用 Axios 的 Vue 组件中，可以通过以下方式引入：
• 如果是在一个较大的项目中，也可以在main.js（Vue 项目的入口文件）中全局引入 Axios，这样所有的组件都可以直接使用它。例如：

javascript

import axios from 'axios';
Vue.prototype.$axios = axios;

然后在组件中就可以通过this.$axios来访问 Axios。

2. 发送 GET 请求

基本的 GET 请求示例：

javascript

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

• 上述代码向https://api.example.com/data发送一个 GET 请求。如果请求成功，服务器返回的数据可以通过response.data获取；如果出现错误（如网络问题或者服务器返回错误状态码），错误信息会被catch块捕获。
• 带参数的 GET 请求：
• javascript

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

这里通过params对象传递查询参数，Axios 会自动将这些参数拼接在 URL 后面，例如请求的 URL 可能会变成https://api.example.com/data?id=1&name=John。

3. 发送 POST 请求

• 基本的 POST 请求示例：

javascript

axios.post('https://api.example.com/data', {key: 'value'
}).then((response) => {console.log(response);}).catch((error) => {console.error(error);});

• 上述代码向https://api.example.com/data发送一个 POST 请求，并且携带了一个数据对象{key: 'value'}。这个数据对象通常是要提交给服务器的数据，比如表单数据。
• 发送 JSON 数据的 POST 请求：
• javascript

const data = {username: 'user1',password: '123456'
};
axios.post('https://api.example.com/login', data, {headers: {'Content - Type': 'application/json'}
}).then((response) => {console.log(response);}).catch((error) => {console.error(error);});

这里通过设置headers中的Content - Type为application/json，告诉服务器发送的数据是 JSON 格式的。

四、拦截器

1. 响应拦截器的基本概念

   • 响应拦截器是 Axios 提供的一个强大功能，用于在服务器响应到达客户端（浏览器或 Node.js 应用）后对响应进行统一处理。它允许你在每个请求返回数据时执行一些通用的操作，而不是在每个请求的then方法中重复相同的代码。
   • 其核心是axios.interceptors.response.use方法，这个方法接受两个函数作为参数，分别用于处理成功的响应和失败的响应。

2. 成功响应的处理

   • 示例

javascript

axios.interceptors.response.use((response) => {// 对响应数据做点什么console.log('响应成功，状态码:', response.status);return response;
}, (error) => {// 处理错误响应的代码
});

• 解释：当服务器返回的响应状态码在2xx范围内（通常表示成功）时，会调用第一个函数。在这个函数中，你可以对response对象进行各种操作。例如，你可以打印响应的状态码（如response.status），也可以对response.data（服务器返回的数据）进行格式转换、数据过滤等操作。最后，一定要返回response对象，这样后续的then方法（如果有的话）才能正常获取到完整的响应。

1. 错误响应的处理
   • 示例

javascript

axios.interceptors.response.use((response) => {return response;
}, (error) => {console.log('响应出错，状态码:', error.response.status);if (error.response.status === 401) {// 例如，当返回401状态码（未授权）时，跳转到登录页面router.push('/login');} else if (error.response.status === 404) {console.log('资源未找到');}return Promise.reject(error);
});

• 解释：当服务器返回的响应状态码不在2xx范围内（通常表示出错）时，会调用第二个函数来处理错误。error对象包含了详细的错误信息，其中error.response是一个包含响应数据的对象，包括状态码（error.response.status）、响应头（error.response.headers）和服务器返回的数据（error.response.data）等。
• 可以根据不同的状态码进行不同的操作。如当状态码为401时，可能表示用户未授权，这时可以通过router.push跳转到登录页面。当状态码为404时，可能表示资源未找到，你可以在控制台打印相关提示。最后，需要返回一个被拒绝的Promise（Promise.reject(error)）来传递错误信息，这样如果在请求链中有后续的catch方法，就可以捕获到这个错误。

1. 多个响应拦截器的使用
   • 可以添加多个响应拦截器，它们会按照添加的顺序依次执行。例如：

javascript

axios.interceptors.response.use((response) => {// 第一个拦截器对响应数据进行初步处理console.log('第一个拦截器：响应成功，状态码:', response.status);return response;
});
axios.interceptors.response.use((response) => {// 第二个拦截器对响应数据进行进一步处理console.log('第二个拦截器：响应成功，状态码:', response.status);return response;
});

• 解释：在这个例子中，当请求成功返回时，首先会执行第一个响应拦截器中的代码，然后再执行第二个响应拦截器中的代码。这种方式可以让你对响应进行分层处理，比如第一个拦截器用于数据格式的初步检查，第二个拦截器用于数据的深度处理。不过需要注意的是，如果在前面的拦截器中返回了一个新的Promise或者修改了response对象，会影响后面拦截器接收到的参数。

除了响应拦截器，Axios还有哪些常用的拦截器？

如何在Axios中取消一个正在进行的请求？

详细介绍一下Axios的并发请求是如何实现的？

1. 请求拦截器

• 请求拦截器可以在请求发送之前对请求进行一些操作，比如添加认证信息、修改请求头、显示加载动画等。
• javascript

axios.interceptors.request.use((config) => {// 在发送请求之前做些什么，例如添加token到请求头const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;
}, (error) => {// 对请求错误做些什么return Promise.reject(error);
});

• 在上述代码中，axios.interceptors.request.use方法用于添加请求拦截器。它接收两个函数作为参数，第一个函数用于处理请求配置（config），第二个函数用于处理请求错误。

2. 响应拦截器

        响应拦截器可以在接收到服务器响应后对响应进行处理，比如检查响应状态码、处理错误信息、隐藏加载动画等。

javascript

axios.interceptors.response.use((response) => {// 对响应数据做点什么return response;
}, (error) => {// 对响应错误做点什么if (error.response.status === 401) {// 例如，当返回401状态码（未授权）时，跳转到登录页面router.push('/login');}return Promise.reject(error);
});

• 同样，axios.interceptors.response.use方法用于添加响应拦截器，它也接收两个函数，分别用于处理正常响应和响应错误。

五、并发请求

• Axios 可以同时发送多个请求，使用axios.all方法。例如:

javascript

const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');
axios.all([request1, request2]).then(axios.spread((response1, response2) => {console.log(response1.data);console.log(response2.data);})).catch((error) => {console.error(error);});

• 上述代码同时发送了两个 GET 请求，当所有请求都成功返回后，axios.spread函数会将各个请求的响应作为参数传递给回调函数，这样就可以分别处理每个响应的数据。

六、取消请求

        有时候需要取消正在进行的请求，Axios 提供了一种方法来实现。首先，需要通过CancelToken来创建一个取消令牌。

javascript

const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {cancelToken: source.token
}).then((response) => {console.log(response.data);}).catch((thrown) => {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {console.error(thrown);}});
// 取消请求
source.cancel('Operation canceled by the user');

• 在上述代码中，axios.CancelToken.source()创建了一个取消令牌的源，通过将cancelToken属性添加到请求配置中，可以将这个令牌与请求关联起来。当调用source.cancel方法时，就可以取消对应的请求。并且在catch块中，可以通过axios.isCancel函数来判断是否是因为取消请求而导致的错误。

总结一下Axios的post请求的基本用法

1. 基本 POST 请求格式
   • 首先需要引入 Axios，在组件中可以使用import axios from 'axios';引入。
   • 基本的 POST 请求示例如下：

javascript

axios.post('https://api.example.com/data', {key: 'value'
}).then((response) => {console.log(response);}).catch((error) => {console.error(error);});

• 这里axios.post方法接收两个主要参数。第一个参数是请求的 URL（如https://api.example.com/data），第二个参数是要发送的数据（如{key: 'value'}），这个数据通常是要提交给服务器的数据，比如表单数据。当请求成功时，在then块中可以通过response对象获取服务器返回的信息；如果请求出错，catch块会捕获错误并打印错误信息。

1. 发送 JSON 数据的 POST 请求
   • 当需要发送 JSON 格式的数据时，需要设置请求头中的Content - Type为application/json。示例如下：

javascript

const data = {username: 'user1',password: '123456'
};
axios.post('https://api.example.com/login', data, {headers: {'Content - Type': 'application/json'}
}).then((response) => {console.log(response);}).catch((error) => {console.error(error);});

• 首先定义了要发送的 JSON 数据对象（如data），然后在axios.post方法的第三个参数中设置headers。通过将Content - Type设置为application/json，告诉服务器发送的数据是 JSON 格式的。同样，请求成功后在then块处理返回信息，出错则在catch块捕获错误。