axios 发起 post请求 json 需要传入数据格式

• • 1. axios 发起 post请求 json 传入数据格式

• • 2. axios get请求

1. axios 发起 post请求 json 传入数据格式

使用 axios 发起 POST 请求并以 JSON 格式传递数据是前端开发中常见的操作。

下面是一个简单的示例，展示如何使用 axios 向服务器发送包含 JSON 数据的 POST 请求。

首先，确保你的项目中已经安装了 axios。如果还没有安装，可以通过 npm 安装它：

npm install axios

接下来，你可以使用以下代码来发起一个 POST 请求：

import axios from'axios';// 要发送的数据
const data = {
username: 'example',
password: '123456'
};// 配置请求选项
const config = {
headers: {'Content-Type': 'application/json'// 设置请求头为 JSON 格式}
};// 发起 POST 请求
axios.post('https://api.example.com/login', data, config).then(response => {console.log('Response:', response.data);}).catch(error => {console.error('Error:', error);});

在这个例子中：

• • data 对象包含了要发送给服务器的数据。

• • config 对象用于配置请求，这里设置了 Content-Type 为 application/json，告诉服务器请求体中的数据是以 JSON 格式编码的。

• • axios.post 方法的第一个参数是目标 URL，第二个参数是要发送的数据，第三个参数是请求配置（可选）。

当请求成功时，then 方法会被调用，并且可以处理从服务器返回的数据；如果请求失败，则会进入 catch 方法，在这里可以处理错误信息。

请根据实际的 API 接口文档调整 URL 和请求数据的结构。

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

2. axios get请求

使用 axios 发起 GET 请求是非常直接的。GET 请求通常用于从服务器获取数据，而且请求参数通常附加在 URL 中。下面是使用 axios 发送 GET 请求的基本示例：

首先，确保你已经安装了 axios。如果没有安装，可以通过 npm 安装：

npm install axios

然后，你可以使用以下代码来发起一个 GET 请求：

import axios from'axios';// 定义请求的URL
const url = 'https://api.example.com/data';// 可选：定义请求参数
const params = {
key1: 'value1',
key2: 'value2'
};// 发起 GET 请求
axios.get(url, { params }).then(response => {// 请求成功时处理响应数据console.log('Data:', response.data);}).catch(error => {// 请求失败时处理错误console.error('Error:', error);});

在这个例子中：

• • url 是你要请求的资源地址。

• • params 是一个对象，包含了你想作为查询字符串附加到 URL 上的参数。这些参数将自动转换成查询字符串形式，例如 ?key1=value1&key2=value2。

• • axios.get 方法的第一个参数是目标 URL，第二个参数是一个配置对象，可以用来指定请求参数（如 params）、请求头等。

当请求成功时，then 方法会被调用，你可以在这里处理返回的数据。如果请求过程中发生错误，catch 方法会被调用，你可以在这里捕获并处理错误。

以上就是使用 axios 发起 GET 请求的基本方法。根据实际情况，你可能需要调整 URL 和请求参数。