🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

在前端开发中，与后端服务的通信是常见的需求。Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 环境中使用，用于发出 HTTP 请求。本文将介绍如何使用 Axios 发送 GET 和 POST 请求，以及如何处理响应和错误。

Axios 简介

Axios 是一个流行的 HTTP 客户端，它提供了一些特性来简化 HTTP 请求的过程，例如拦截请求和响应、转换请求和响应数据、取消请求等。Axios 支持所有现代浏览器，并且可以在 Node.js 环境中使用。

发送 GET 请求

GET 请求用于从服务器检索数据。以下是使用 Axios 发送 GET 请求的基本示例：

import axios from 'axios';// 发送 GET 请求
axios.get('https://api.example.com/data').then(response => {// 处理响应数据console.log(response.data);}).catch(error => {// 处理错误console.error('Error fetching data:', error);});

添加请求参数

你可以通过在 URL 中添加查询字符串或者使用 params 选项来添加请求参数：

axios.get('https://api.example.com/data', {params: {search: 'keyword',page: 1}
});

发送 POST 请求

POST 请求通常用于向服务器发送数据以进行处理。以下是使用 Axios 发送 POST 请求的基本示例：

import axios from 'axios';// 发送 POST 请求
axios.post('https://api.example.com/data', {key1: 'value1',key2: 'value2'
}).then(response => {// 处理响应数据console.log(response.data);}).catch(error => {// 处理错误console.error('Error posting data:', error);});

设置请求头

有时你可能需要设置特定的请求头，例如设置 Content-Type 或者认证信息：

axios.post('https://api.example.com/data', data, {headers: {'Content-Type': 'application/json','Authorization': 'Bearer your_token_here'}
});

处理响应和错误

Axios 的请求方法返回一个 Promise，你可以使用 .then() 和 .catch() 方法来处理响应和错误。

响应对象

响应对象包含以下重要属性：

• data: 服务器响应的主体内容。
• status: HTTP 状态码。
• statusText: HTTP 状态信息。
• headers: 响应头。
• config: 请求配置。

错误处理

错误对象可能包含以下属性：

• message: 错误信息。
• code: 错误代码。
• response: 如果服务器响应了一个状态码，超出 2xx 范围，这个属性会包含服务器的响应信息。

结论

Axios 是一个功能强大的 HTTP 客户端，它简化了 HTTP 请求的过程，并提供了丰富的特性来处理请求和响应。无论是发送 GET 请求来检索数据，还是发送 POST 请求来提交数据，Axios 都提供了一种简单而一致的方式来处理这些操作。通过掌握 Axios 的基本用法，你可以更有效地与后端服务进行通信。