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公司 ...
随机推荐
- exgcd & 线性同余方程
前置芝士 裴蜀定理 同余的性质 exgcd exgcd即扩展欧几里得定理,常用来求解\(ax + by = gcd(a,b)\)的可行解问题 推导过程: 考虑我们有: \(ax + by = gc ...
- 有效的字母异位词&两个数组的交集& 快乐数& 两数之和
一.有效的字母异位词 242. 有效的字母异位词 1.方法概述 因为本题中字符串只包含小写字母,就可以定义一个数组来记录字符串中字符出现的次数.遍历第一个字符串,用charAt拿到对应的小写字母然后减 ...
- P17_总结
能够知道如何创建小程序项目 微信开发者工具的使用.appID 的获取 能够清楚小程序项目的基本组成结构 app.js.app.json.app.wxss.pages 文件夹 能够知道小程序页面由几部分 ...
- Docker部署Nacos自动停止运行
1.现象 使用docker部署的Nacos在运行一段时间后,就自动停止运行了. 查看docker运行容器,nacos停止了 2.解决 因为是学生购买的轻量级服务器,所以配置很低,出现这种问题我默认是内 ...
- 代码随想录算法训练营day17 | leetcode ● 110.平衡二叉树 ● 257. 二叉树的所有路径 ● 404.左叶子之和
LeetCode 110.平衡二叉树 分析1.0 求左子树高度和右子树高度,若高度差>1,则返回false,所以我递归了两遍 class Solution { public boolean is ...
- PostgreSQL lag,lead获取记录前后的数据
场景:获取当前行的下一行某一字段数据,获取当前行的上一行某一字段数据 1.测试数据: postgres=# select * from tb1; id | name ----+------ 1 | a ...
- 常用的"小脚本"-json数据处理
小背景: 我们公司项目中的小脚本是一些工具类,比如常用的是MapUtil工具类的一些方法 写公司的MapUtil工具类的方法要注意,方法名的命名,因为方法名,在公司的项目的某个业务流程有对方法名的进行 ...
- SAP 文档必须包含正确的根元素
--------------------------- LoadXML Malformed XML Error --------------------------- 文档必须包含正确的根元素. -- ...
- 时间戳转换为yyyy-MM-dd格式
原文链接https://blog.csdn.net/hu104160112/article/details/111167033
- IT之软件公司组织架构
总结一下软件企业的组织架构,软件公司大部分都很年轻,整个行业还在调整期,一般规模都在300人以内,现在国内大型的软件产品公司都不是靠软件起家的,国内软件三强:华为.中信.海尔都是从硬件甚至是家电做起的 ...