前端发送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格式返回给前端。

相关推荐
摸鱼仙人~36 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图