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

心外无物的工作技术笔记2024-11-30 7:04

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：

bash 复制代码

npm install axios

1.2 在前端代码中使用 axios：

javascript 复制代码

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 请求和响应，并进行各种配置和扩展。