Axios fetch的基本用法

article/2025/7/9 14:33:05

fetch API通过promise接口来实现的。

fetch( ' / abc' ) .then (data=>{
return data.text (); //return返回的是primose对象}).then (ret=>{
//注意这里得到的才是最终的数据console.log (ret) ;
});

1.fetch常用配置选项
method(String):HTIP请求方法,默认为GET(GET、POST、PUT、DELETE)

body(String):HTTP的请求参数

headers(Cject): HTTP的诘求头,默认为8
 axios的基本特性
axios(官网: https://aithub.com/axios/axios)是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征:

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据

 axios的参数传递
1.GET传递参数
通过URL传递参数
通过params选项传递参数

axios.dglete ( /adata ', {
params : {
id: 123}
})
.then (ret=>{
console.log (ret.data)})

2.DELETE传递参数
·参数传递方式与GET类似
3.POST传递参数
通过选项传递参数(默认传递的是json修式的数据)

axios.post ( '/adata ' , {
uname: 'tom',
pwd: 123
} ) .then (ret=>{
console.log (ret.data)})

4.PUT传递参数·
参数传递方式与POST类似

axios.put( '/ adata/ 123',i心uname: 'tom' ,
pwd: 123
} ) .then (ret=>{
console.log (ret.data)})

 axios的响应结果响应结果的主要属性
·data:实际响应回来的数据
headers :响应头信息·
status响应状态码·
statusText:响应状态信息

axios的全局配置
axios.defaults.timeout = 3000;//超时时间
axios.defaults.baseURL = 'http://localhost:3000/app;1/默认地址
axios.defaults.headers[ 'mytoken’ ]= 'agwerwqwerqwer2ewwe23eresdf23’//设置请求头

4.6 axios拦截器

1.请求拦截器
在请求发出之前设置一些信息


 

 ⒉响应拦截器
在获取数据之前对数据做一些加工处里

 


http://chatgpt.dhexx.cn/article/wZxpISRu.shtml

相关文章

前端网络基础 - fetch

目录 XMLHttpRequest缺点 fetch的优点 fetch的请求和响应设计 Request Response fetch函数的用法 fetch取消请求 fetch的异常结果 fetch和axios的区别 XMLHttpRequest缺点 浏览器提供了原生的AJAX实现类XMLHttpRequest,基于该类实例,我们可以实…

JavaScript fetch() 方法

JavaScript 中的fetch()方法 用于向服务器请求并加载网页中的信息。请求可以是返回 JSON 或 XML 格式数据的任何 API。此方法返回一个承诺。 句法: fetch( url, options ) 参数:此方法接受上面提到的两个参数,如下所述: URL&a…

fetch的使用方法

注意:fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js内置的一种方法,所以无需按包,无需引用,直接使用。 1.发送get请求(fetch默认是fe…

浏览器控制台copy as fetch用法

不解释了,直接上图。 1、先选择要copy的接口,浏览器控制台右键选中,复制到剪贴板 2、复制到控制台,大致如下。 3、去掉末尾的分号,添加如下: .then(response > response.json()).then(data >console…

fetch的用法ajax,Promise发送Ajax请求、fetch用法

实例方法:Document /* 基于Promise发送Ajax请求 */ function queryData(url) { var p new Promise(function(resolve, reject){ var xhr new XMLHttpRequest(); xhr.onreadystatechange function(){ if(xhr.readyState ! 4) return; if(xhr.readyState 4 &&…

vue学习笔记-接口调用fetch用法

一,fetch概述 二,fetch基本用法 第一个then是fetch的一部分,返回一个promise对象,于是可以继续用then来处理返回的结果ret。 这段代码是服务器的代码: //这是在创建服务器,通过express,创建名为…

Vue接口调用(一)fetch用法

Vue接口调用🔥 接口调用地址Vue接口调用(一)fetch用法https://blog.csdn.net/m0_55990909/article/details/123957200Vue接口调用(二)axios用法🔥https://blog.csdn.net/m0_55990909/article/details/1239…

Fetch使用方法

前言: fetch是用来取代传统的XMLHttpRequest的。 它的优点很多,包括链式调用的语法、返回promise等。 什么是fetch? fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。 WHY fetch? xhr请求写起来非常的混…

彻底关闭烦人的---FF新推荐

1、进入控制面板——>管理工具——>服务 找到Flash Helper Service服务 2、进入控制面板——>管理工具——>任务计划程序 找到FlashHelper TaskMachineCore的任务,将其删除

如何关闭flashhelper的ff新推荐广告弹窗

描述:如何关闭flashhelper的ff新推荐广告弹窗 步骤: 方法一,直接C盘搜索flashhelper文件,删除即可方法二,在计算机管理服务里面,找到flashhelper禁用

ff新推荐的关闭办法

这个是flash的广告 如果直接删除Adobe Flash Helper会导致flash的不正常使用 建议是winR在输入框中输入service,在service里找到 然后停用再禁用掉就可以了

“FF新推荐”猥琐的弹窗如何关闭?

自己的电脑中时常会弹出一个叫“FF新推荐”的广告弹窗,扰民不说显示的内容也很猥亵。 特别是在演示文档,开会时就特别尴尬。 1. FF新推荐是个什么鬼?只要你安装了Flash控件会自动更新弹窗这个莫名其妙,十分尴尬的弹窗&#xff0…

禁用FF新鲜事广告

不知道啥时候起,电脑开机之后总会弹出莫名其妙的FF新鲜事广告,如图 定睛一看,Flash助手推荐,原来Flash才是罪魁祸首。这不能忍。打开任务管理器,不停按f,可以找到一个叫Flash Helper Service的进程&#xf…

FF新推荐弹窗怎么彻底让他爬

背景:不知道怎么就捆绑安装了这个流氓软件,还找不到位置,不知道在哪删?今天突然灵机一动试了一下这个方法,然后可行 第一步:守株待兔——等他不经意的弹出 第二步:欲擒故纵——点击右上角菜单创…

git merge之--no-ff 的作用

禁止使用快进模式 no-fast—forward $ git merge --no-ff -m "merge with no-ff" dev在许多介绍 Git 工作流的文章里,都会推荐在合并分支时,加上 --no-ff 参数: $ git checkout develop $ git merge --no-ff feature–no-ff 在这的…

如何卸载FF推荐?

很多小伙伴们都发现,近一段时间,自己的电脑中时常会弹出一个叫“FF新推荐”的广告弹窗,扰民不说显示的内容也很猥亵。按理说,电脑上开启拦截软件后,一般的广告弹窗是不会出现的,那么这个能跳过安全工具拦截…

git merge 合并时 --no-ff 的作用——主要影响版本回退(好文章!)

在许多介绍 Git 工作流的文章里,都会推荐在合并分支时,加上 --no-ff 参数: $ git checkout develop$ git merge --no-ff feature --no-ff 在这的作用是禁止快进式合并。我们平常什么都不加的时候,则使用默认的 --ff &#xff0c…

win10如何禁用\删除讨厌的ff新鲜事(ff新推荐)(flash弹窗广告)

雾草,Adobe Flash植入的这种广告太变态了! 定位: 打开运行窗口(winr),输入“services.msc”,之后回车确定 然后我们在弹出来的窗口中找到“flash helper service”选项,之后右键…

#FF00FF(255,0,255)应该是紫色(Purple),把#FF00FF称为“品红”(“洋红/Magenta”)是一种误称

作者:❄️固态二氧化碳❄️ (主页) 链接:#FF00FF(255,0,255)应该是紫色(Purple),把#FF00FF称为"品红"(“洋红/Magenta”)是一种误称 - 固态二氧化碳的博客 - CSDN博客 来源:CSDN博客 发表时间:2019年06月02日 18:31:06 …

音乐推荐系统

✨写在前面:强烈推荐给大家一个优秀的人工智能学习网站,内容包括人工智能基础、机器学习、深度学习神经网络等,详细介绍各部分概念及实战教程,通俗易懂,非常适合人工智能领域初学者及研究者学习。➡️点击跳转到网站。…