目录

  • 前言
  • 一、fetch
    • 1、基本特性
    • 2、语法
    • 3、基本用法
  • 二、fetch请求参数
    • 1、常用的配置项
    • 2、get请求传参
    • 3、post请求传参
  • 三、fetch响应结果
    • 响应数据格式

前言

fetch是基于Promise来实现的,Promise用法:Promise用法及基于Promise处理ajax请求

一、fetch

1、基本特性

更加简单的数据获取方式,功能更强大,更灵活,可以看作是xhr的升级版

官方:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

xhr相关知识点:

2、语法

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

3、基本用法

text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,需要return
用途:用于获取后台返回的数据

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

二、fetch请求参数

1、常用的配置项

配置项类型说明
methodStringHTTP请求方法,默认为get(get、post、put、delete)
bodyStringHTTP请求参数
headersObjectHTTP请求头,默认为{}

2、get请求传参

put类似

fetch('/abc?id=123',{method:'get'}).then(data=>{        return data.text()}).then(ret=>{        // 这里得到的才是真正的数据        console.log(ret);   })

3、post请求传参

delete类似
必须写请求头

fetch("/abc", {  method: "POST",  body: "uname=list&pwd=123",  headers:{  'Content-Type','application/x-www-form-urlencoded';  }})  .then((data) => {    return data.text();  })  .then((ret) => {    // 这里得到的才是真正的数据    console.log(ret);  });

三、fetch响应结果

响应数据格式

名称说明
text()将返回体处理成字符串类型
json()返回结果和JSON.parse(responseText)一样
fetch("/abc/json")    .then((data) => {      // return data.text();      return data.json()    })    .then((ret) => {      // 这里得到的才是真正的数据      console.log(ret);    });