fetch用法

最新推荐文章于 2024-12-10 18:29:47 发布

zayzy

最新推荐文章于 2024-12-10 18:29:47 发布

阅读量686

点赞数

分类专栏： Vue fetch 文章标签： fetch

本文链接：https://blog.csdn.net/weixin_45630345/article/details/119541711

版权

Vue 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

fetch

5 篇文章 0 订阅

订阅专栏

1 fetch概述

1.1 基本特性

更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版
基于Promise实现

1.2 语法结构

fetch(url).then(fn2)
              .then(fn3)
          …
              .catch(fn)

Fetch_API

2 fetch用法

2.1 fetch的基本用法

fetch('/abc').then(data => {
	//得到的是一个promise对象，用于获取后台返回的数据
	return data.text();
}).then(ret => {
	//这里才是得到的最终数据
	console.log(ret);
})

2.2 fetch请求参数

2.2.1 常用配置选项

method（String）:HTTP请求方法，默认为GET（GET，POST,PUT,DELETE）
body（String）:HTTP的请求参数
headers（Object）：HTTP的请求头，默认为{}

fetch('/abc',{
	method:'get'
}).then(data => {
	//得到的是一个promise对象，用于获取后台返回的数据
	return data.text();
}).then(ret => {
	//这里才是得到的最终数据
	console.log(ret);
})

2.2.2 请求方式

2.3 fetch响应结果

2.3.1 相应数据格式

text():将返回体处理成字符串类型
json():返回结果和JSON.parse(responseText)一样

fetch('/abc',{
	method:'get'
}).then(data => {
	return data.json();
	//return data.text();
	//如果是text(),最终结果是字符串类型，想使用要用JSON.parse(ret)进行转换
}).then(ret => {
	//这里才是得到的最终数据
	console.log(ret);
})