fetch,axios简介与语法
fetch简介&语法
留心:像之前的XMLHttpRequest 但并不真的是,而是代替的
#概念:fetch是ecma组织基于promise开发http api ,用来代替xhr
#语法:fetch函数类型,有两个实参,第一个实参是请求地址必须写,第二个是对象类型选写、里面的键是固定的、例如method字符串、headers对象类型(1请求头藏接口请求参数2请求头请求数据编码)、body键声明post请求参数(默认字符串类型数据按照get传参形式去写 参数名=值&.....&参数名=值
fetch(请求地址, {
method: 'get/post',
headers: {
'token': '用户登录成功的身份标识',
'content-type': 'application/x-www-form-urlencoded',
....
},
body: '参数名=值&.....&参数名=值'
// ...
})
#get
fetch(请求地址).then(res => res.json()).then(res => console.log(res))
#post
fetch(请求地址, {
method: 'post',
# 针对post请求传递字符串类型
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: '参数名=值&.....&参数名=值'
# post请求传递JSON数据类型
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
参数名: '数据',
参数名: '数据'
})
})
.then(res => res.json())
.then(res => console.log(res))
axios简介&语法
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
语法
说明
#axios可以当方法使用、也可以当对象使用,还可以n种操作
#axios可以当方法使用:有一个实参对象类型必须,里面有固定的键 method字符串, headers对象类型, data也是根据请求方式确定类型, timeout请求超时等等
#留心:axios返回promise对象,直接通过.then获取接口数据,但是第一次then返回的HTTP相关信息、接口数据在data键中,因此需要写res.data才能获取接口数据。推荐优化.then(res => res.data).then(res=> res)1 axios函数(较多
# 结构
axios({
url: '',
method: '',
headers: {},
data: 类型根据请求方式来定, // post 如果gert就在url后面写?参数名=值 或者 用params对象类型
params: {参数名:值}
...
})
# get
axios({
方法1
url: '请求地址?参数名=值',
方法2
url: '请求地址',
params: {
参数名:值,
}
method: 'get',
headers: {}
...
})
# post
axios({
url: '',
method: '',
headers: {},
data: 类型根据请求方式来定,
})
fetch,axios简介与语法的更多相关文章
- 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...
- 前端进阶(2)使用fetch/axios时, 如何取消http请求
前端进阶(2)使用fetch/axios时, 如何取消http请求 1. 需求 现在前端都是SPA,我们什么时候需要取消HTTP请求呢? 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没 ...
- 一起学HTML基础-JavaScritp简介与语法
简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件. JavaScript 是 Web 的编程语 ...
- JaveScript——简介、语法
JS简介: 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle ...
- JavaScript简介、语法
一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...
- JavaScript基础(简介、语法)
一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...
- 【3-28】javascript简介及语法
一.简介 (一)定义:JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,需有宿主文件:html文件. (二)作用:1.进行数据运算 2.对浏览器事件作出响 ...
- VUE系列三:实现跨域请求(fetch/axios/proxytable)
1. 在 config/index.js 配置文件中配置proxyTable 'use strict' // Template version: 1.3.1 // see http://vuejs-t ...
- HTML-★★★★★JavaScritp简介与语法★★★★★
简介: 1.什么是JavaScript? 它是个脚本语言,作用是使 HTML 页面具有更强的动态和交互性,它需要有宿主文件,它的宿主文件就是html文件. JavaScript 是 Web 的编程语 ...
- 3.25课·········JavaScript简介与语法
一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...
随机推荐
- MySQL-多表查询的两种方法、Navicat、python操作MySQL
1.多表查询的两种方法 1.连表操作: 1.1:inner join:内连接,将两张表共同的部分连接起来生成一张新表.拼接顺序是把后面的表拼在前面的表,如果颠倒位置结果不同. select * fro ...
- 数据库系列:MySQL慢查询分析和性能优化
1 背景 我们的业务服务随着功能规模扩大,用户量扩增,流量的不断的增长,经常会遇到一个问题,就是数据存储服务响应变慢. 导致数据库服务变慢的诱因很多,而RD最重要的工作之一就是找到问题并解决问题. 下 ...
- SpringBoot 整合Seccurity、权限管理
Spring Boot 整合Spring Seccurity 1.创建maven工程 <?xml version="1.0" encoding="UTF-8&quo ...
- C语言补漏--内存管理-完结
1.内存分布 2.内存操作函数 数组清空 2. 内存拷贝函数 数组拷贝 3.内存对比 总结 堆区开辟 内存泄漏只申请不释放,导致内存空间持续增长,导致推出 内存污染向没有申请的内存空间写数据 向堆区 ...
- JZOJ 4299. 【NOIP2015模拟11.2晚】舳舻牌
题目 思路 倒序 \(DP\) 设 \(f_{i,j}\) 表示 \(A\) 先手,当前 \(A\) 报出的值为 \(i\),\(B\) 报出的值为 \(j\),\(A\) 取诱惑值大于等于 \(i\ ...
- Android中drawable和mipmap到底有什么区别
欢迎通过我的个人博客来查看此文章 老项目代码中发现有的图片放到了drawable中, 有的图片放到了mipmap中, 开发时秉承哪个目录下文件多放哪里的原则, 偶尔有疑惑搜一搜文章, 看到了结论也就这 ...
- JSP 与 Servlet 之间的联系,及其语法
JSP 是什么 JSP 将 Java 代码和特定变动内容嵌入到静态的页面中,实现以静态页面为模板,动态生成其中的部分内容.JSP 文件在运行时会被其编译器转换成更原始的 Servlet 代码.JSP ...
- Dev Express 框架自定义登录添加短信验证功能
需求:登录界面改成这样 记录一下过程,以便下次操作类似的步骤有遗忘,也与大伙儿分享下,如有不当之处请指出,感谢. 参考官网文档:https://docs.devexpress.com/eXpressA ...
- 05-python的输入与输出
python输入(input)与输出(print) 一.输入(input) 在python3中,input会将接收到的用户输入自动存储为字符串类型 username = input('输入用户名:') ...
- Win10中找回曾复制过的东西
按Win+V,如果弹出的"剪贴板历史"设置已经打开,那么就可以找回.建议大家打开这项设置以防万一.