前端发送Ajax请求的技术Axios

目录

1.引入Axios文件

2.使用Axios发送请求

2.1请求方法的别名

请求的URL地址怎么来的?

后端实现

前后端交互


1.引入Axios文件

javascript 复制代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用Axios发送请求

2.1请求方法的别名

|----------------------------------------|------------|
| 方法 | 描述 |
| axios.get(url , config) | 发送get请求 |
| axios.delete(url , config) | 发送delete请求 |
| axios.post(url , data\[, config]) | 发送post请求 |
| axios.put(url , data\[, config]) | 发送put请求 |

get请求:

javascript 复制代码
axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
    console.log(result.data);
})

post请求:

javascript 复制代码
axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/update","id=1").then(result => {
    console.log(result.data);
})

所有请求发出后不会立即执行then后面的代码,而是等服务器响应回来后执行。

请求的URL地址怎么来的?

是后端开发人员定义的API接口地址。

后端实现

后端开发人员会基于特定的技术栈(比如java,Node js,Python等)构建服务器

并在服务器上编写处理各种HTTP请求(GET,POST的)的代码逻辑。

当服务器收到GET||post请求时,调用相应的处理函数响应

前后端交互

前端通过Axios或其他HTTP客户端发送请求与到URL,并附带必要额查询参数(如姓名,性别,职位)。

服务端收到请求后就,解析这些参数,执行相应的数据库查询操作,最后将结果打包成JSON格式返回给前端。

相关推荐
kyriewen2 小时前
我手写了一个 EventEmitter,面试官追问了 6 个问题——第 4 个我没答上来
前端·javascript·面试
IT_陈寒2 小时前
Java的Date类又坑了我一次,改用时间戳真香
前端·人工智能·后端
山河木马3 小时前
矩阵专题2-怎么创建视图矩阵(uViewMatrix)
javascript·webgl·计算机图形学
小林攻城狮3 小时前
使用 Transport 节流解决 Vercel AI SDK 流式渲染卡死问题
前端·react.js
前端缘梦3 小时前
告别 TS 运行时类型漏洞!Zod 完整入门实战教程(前端 / 全栈必备)
前端·react.js·全栈
the_answer3 小时前
Webpack vs Vite 深度对比分析
前端·webpack
转转技术团队4 小时前
验证码识别实战:前端不写页面,改训模型了?
前端
MomentYY4 小时前
Temperature:AI 的“脑洞旋钮”
前端·llm·ai编程
远航_4 小时前
OpenSpec 完整详细介绍
前端·后端
召钱熏4 小时前
状态枚举正确≠渲染正确:一个语音按钮的状态机边界修复实录
android·前端