Axios - 发起请求

前言

在前端开发中，Axios 是一个基于 Promise 的 HTTP 库，能够在浏览器和 Node.js 中发送 HTTP 请求。Axios 提供了多种方法来发起请求，既有简洁的快捷方式，也有灵活的配置选项。

---

一、Axios 请求的基础语法格式

1. 通用请求格式

axios(config)

• 参数说明：
  • config 是一个对象，包含请求的所有配置信息，如方法、URL、请求头、超时时间等。

2. 快捷方式请求格式

// GET 请求
axios.get(url, config)

// POST 请求
axios.post(url, data, config)

// 其他 HTTP 请求方法
axios.put(url, data, config)
axios.delete(url, config)
axios.patch(url, data, config)

• 参数说明：
  • url：请求的 URL。
  • data：请求的数据（通常用于 POST、PUT、PATCH 请求）。
  • config：请求的配置对象（可选），包含请求头、参数、超时时间等。

---

二、使用 Axios 发起 GET 请求

GET 请求通常用于从服务器获取数据。Axios 提供了简洁的 .get() 方法，可以直接传入 URL 和查询参数。

// GET 请求
axios.get(url, config)

// GET 请求的基本语法
axios.get(url, { params: { /* 查询参数对象 */ } })
    .then(response => {
        // 处理成功的响应数据
        console.log(response.data); // 响应的数据
    })
    .catch(error => {
        // 处理请求错误
        console.error('Error:', error);
    });

// 具体的请求示例
var url = 'https://example.com/api/get'; // 请求的 URL 地址
var paramsObj = { name: 'John', age: 30 }; // 查询参数对象

axios.get(url, { params: paramsObj })
    .then(response => {
        // 处理服务器返回的数据
        var result = response.data;
        console.log(result); // 输出结果
    })
    .catch(error => {
        console.error('请求出错:', error);
    });

代码说明：

• axios.get(url, { params: paramsObj })：发送 GET 请求。url 是请求地址，params 是查询参数对象。
• response.data：服务器返回的响应数据。

---

三、使用 Axios 发起 POST 请求

POST 请求通常用于向服务器提交数据。Axios 提供了简洁的 .post() 方法，可以传入 URL 和请求体数据。

// POST 请求
axios.post(url, data, config)

// POST 请求的基本语法
axios.post(url, { /* 请求体数据对象 */ })
    .then(response => {
        // 处理成功的响应数据
        console.log(response.data); // 响应的数据
    })
    .catch(error => {
        // 处理请求错误
        console.error('Error:', error);
    });

// 具体的请求示例
var url = 'https://example.com/api/post'; // 请求的 URL 地址
var dataObj = { location: '北京', address: '朝阳区' }; // 请求体数据对象

axios.post(url, dataObj)
    .then(response => {
        // 处理服务器返回的数据
        var result = response.data;
        console.log(result); // 输出结果
    })
    .catch(error => {
        console.error('请求出错:', error);
    });

代码说明：

• axios.post(url, dataObj)：发送 POST 请求。url 是请求地址，dataObj 是请求体数据对象。
• response.data：服务器返回的响应数据。

---

四、使用 Axios 发起请求 (详细配置)

如果你需要更多控制，比如自定义请求头、超时时间等，可以使用通用的 axios(config) 方法。它类似于 jQuery 的 $.ajax() 方法。

// 通用的请求配置语法
axios({
    method: '请求类型', // HTTP 请求方法，如 'GET'、'POST'、'PUT'、'DELETE'
    url: '请求的 URL 地址', // 请求的 URL 地址
    params: { /* GET 参数对象 */ }, // GET 请求的参数，通过 params 提供
    data: { /* POST 数据对象 */ }, // POST 请求的数据，通过 data 提供
    headers: { /* 自定义请求头 */ }, // 自定义请求头
    timeout: 5000 // 请求超时时间，单位是毫秒
})
.then(response => {
    // 处理成功的响应数据
    console.log(response.data); // 响应数据
})
.catch(error => {
    // 处理请求错误
    console.error('Error:', error);
});

代码说明：

• method：请求方法，如 GET、POST、PUT、DELETE 等。
• url：请求的 URL 地址。
• params：GET 请求的参数对象，会拼接在 URL 之后。
• data：POST 请求的请求体数据对象。
• headers：自定义请求头信息。
• timeout：请求的超时时间，以毫秒为单位。

具体使用示例

// 使用 axios 发起 GET 请求
axios({
    method: 'GET',
    url: 'https://example.com/api/data',
    params: { name: 'John', age: 30 },
    headers: {
        'Authorization': 'Bearer your-token'
    }
})
.then(response => {
    console.log('GET 请求成功:', response.data);
})
.catch(error => {
    console.error('GET 请求失败:', error);
});

// 使用 axios 发起 POST 请求
axios({
    method: 'POST',
    url: 'https://example.com/api/users',
    data: { username: 'johndoe', password: '123456' },
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token'
    }
})
.then(response => {
    console.log('POST 请求成功:', response.data);
})
.catch(error => {
    console.error('POST 请求失败:', error);
});

---

总结

• 基础请求格式：axios(config) 和 axios.get(url, config) 是最常用的请求方式。
• 快捷方式请求：axios.post(url, data, config) 等提供了简洁的写法。
• 详细配置请求：使用 axios({}) 可以灵活配置各种请求参数和选项。
• 全局配置与拦截器：可以通过全局配置和拦截器简化重复设置，提高代码的可维护性。