Web开发基础学习——axios的理解

Web开发基础学习系列文章目录

第一章 基础知识学习之axios的理解

---

文章目录

• Web开发基础学习系列文章目录
• 前言
• 一、使用方法
• • [1.1 安装 axios：](#1.1 安装 axios：)
  • [1.2 在前端代码中使用 axios：](#1.2 在前端代码中使用 axios：)
• 总结

---

前言

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。它提供了简单的 API 来处理 HTTP 请求和响应，并支持拦截器、取消请求、自动转换 JSON 数据等功能。

当前端使用 axios 向后端发送跨域请求时，后端需要正确配置 CORS 以允许这些请求。corsheaders 就是用于在 Django 后端配置 CORS 的工具。

---

一、使用方法

1.1 安装 axios：

npm install axios

1.2 在前端代码中使用 axios：

import axios from 'axios';

// 发送 GET 请求
axios.get('http://localhost:8000/api/data/')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

// 发送 POST 请求
axios.post('http://localhost:8000/api/data/', {
    name: 'New Resource'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

在前端的.js文件中调用axios 发送请求。

• corsheaders：配置 Django 后端以允许跨域请求。
• axios：前端用于发送 HTTP 请求，包括跨域请求。

---

总结

Axios 是一个功能强大的 HTTP 客户端，提供了简洁的 API 和丰富的功能，适用于各种前端和后端应用程序。通过使用 Axios，可以轻松地处理 HTTP 请求和响应，并进行各种配置和扩展。