JavaScript中fetch方法的使用示例全面详解

// 发送一个get请求
// 实例化一个XMLHttpResquest对象
let xhr = new XMLHttpResquest();
// 注册httpRequest.readyState改变时会回调的函数,xhr.onreadystatechange
// readyState共有5个可能的值,
//0    UNSENT (未打开)    open()方法还未被调用;
//1    OPENED  (未发送)    send()方法还未被调用;
//2    HEADERS_RECEIVED (已获取响应头)    send()方法已经被调用, 响应头和响应状态已经返回;
//3    LOADING (正在下载响应体)    响应体下载中; responseText中已经获取了部分数据;
//4    DONE (请求完成)    整个请求过程已经完毕.
xhr.onreadystatechange = function () {
    //该回调函数会被依次调用4次
    console.log(xhr.resdyState);
    //请求已完成
    if (xhr.readyState === 4) {
        //http状态为200
        if (xhr.status === 200) {
            //打印响应来的数据
            console.log(xhr.response);
            //JSON.parse()将JSON格式的字符串转化为JSON对象
            let data = JSON.parse(xhr.response);
            //打印得到的JSON对象
            console.log(data);
        }
    }
};

let url = '网址';
// 该方法为初始化请求,第一个参数是请求的方法,比如GET,POST,PUT,
// 第二个参数是请求的url,第三个参数为true表示发送异步请求
xhr.open('GET', url, true);
//设置http请求头
httpRequest.setRequestHeader('Content-Type', 'application/json');
//发出请求,参数为要发送的body体,如果是GET方法的话，一般无需发送body,设为空就可以
httpRequest.send(null);

// 请求的网址
let url = '网址';
//发起get请求
let _fetch = fetch(url).then(function (response) {
    //response.status表示响应的http状态码
    if (response.status === 200) {
        // json是返回的response提供的一个方法,
        // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
        return response.json();
    } else {
        return {};
    }
});
_fetch = _fetch
    .then(function (data) {
        //响应的内容
        console.log(data);
        // 响应数据格式化
        console.log(data.json());
    })
    .catch(function (err) {
        console.log(err);
    });

fetch(url)
  .then(...)
  .catch(...)

// 接口的来源 https://api.uomg.com/doc-rand.qinghua.html
const data = {
    format: '搭讪',
};
const url = 'https://api.uomg.com/api/rand.qinghua';
fetch(url, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json',
    },
    credentials: 'same-origin',
})
    .then(res => {
        //转换后返回的数据
        console.log(res.json());
    })
    .catch(err => {
        //请求的错误处理
        console.log(err);
    });

fetch('网址')
    // fetch()接收到的response是一个 Stream 对象
    // response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象
    .then(response => response.json())
    .then(json => console.log(json)) //获取到的json数据
    .catch(err => console.log('Request Failed', err));

async function getJSON() {
    let url = '请求的网址';
    try {
        let response = await fetch(url);
        return await response.json();
    } catch (error) {
        console.log('失败', error);
    }
}
console.log(getJSON()); // 获取到的数据

async function getFetchText() {
    let response = await fetch('网址');
    console.log(response.status); // 获取http状态码 200
    console.log(response.statusText); // 获取http响应的状态信息
}
getFetchText();

async function getfetchText() {
  let response = await fetch('网址');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

if (response.ok) {
  // 请求成功
  console.log('请求成功')
} else {
  // 请求失败
  console.log(‘请求失败')
}

const response = await fetch(url);
for (let [key, value] of response.headers) { 
  console.log(`${key} : ${value}`);  
}
// 或者
for (let [key, value] of response.headers.entries()) { 
// response.heasers.entries()方法返回一个遍历器，可以依次遍历所有键值对([key,value])
  console.log(`${key} : ${value}`);  
}

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭讪' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(res => console.log(res.json())); // 随机的搭讪内容

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭讪' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(res => console.log(res.json())); // 随机的搭讪内容

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭讪' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(res => console.log(res.json())); // 随机的搭讪内容

const response1 = await fetch('图片地址');
// response.clone()复制了一份 Response 对象，然后将同一张图片读取了两次
const response2 = response1.clone();
const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();
image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

const response = await fetch('图片地址');
// response.body.getReader()方法返回一个遍历器
const reader = response.body.getReader();
while(true) {
  // 这个遍历器的read()方法每次返回一个对象，表示本次读取的内容块
  const {done, value} = await reader.read();
  // done属性是一个布尔值，用来判断有没有读完
  if (done) {
    break;
  }
  // value属性是一个 arrayBuffer 数组，表示内容块的内容，而value.length属性是当前块的大小
  console.log(`Received ${value.length} bytes`)
}

fetch(url,optionObj)

const response = fetch(url, {
  method: "GET",//请求方式
  headers: {//定制http请求的标头
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,//post请求的数据体，因为此时为get请求，故为undefined
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",//用于设定fetch请求的referer标头
  mode: "cors", //指定请求模式，此时为cors表示支持跨域请求
  credentials: "same-origin",//发送cookie
  cache: "default",//指定如何处理缓存
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined 
});

//创建一个AbortController实例
let controller = new AbortController();
fetch(url, {
  signal: controller.signal
});
//给controller.signal绑定监听事件，controller.signal的值改变则会触发abort事件
controller.signal.addEventListener('abort',
  () => console.log('abort!')
);
// controller.abort()方法用于发出取消信号。这时会触发abort事件，这个事件可以监听
controller.abort(); // 取消
// 可以通过controller.signal.aborted属性判断取消信号是否已经发出
console.log(controller.signal.aborted); // true

//创建实例
let controller = new AbortController();
//设置定时器
setTimeout(() => controller.abort(), 300);
try {
  let response = await fetch('请求路径', {
    signal: controller.signal
  });
} catch(err) {
  if (err.name == 'AbortError') {
    console.log('Aborted!');
  } else {
    throw err;
  }
}

fetch('https://api.uomg.com/api/rand.qinghua', {
    body: JSON.stringify({ format: '搭讪' }),
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
}).then(response => console.log(response.json())); // 随机的搭讪内容

async function fetchFun(){
    const response = await fetch('http://127.0.0.1:3000/api?name=tom&age=18')
    console.log('bodyUsed:', response.bodyUsed)
    const body = await response.json()
    console.log(body)
    console.log('bodyUsed:', response.bodyUsed)
    const bodyAgain = await response.json()
    console.log(bodyAgain)
}
fetchFun()

async function fetchFun(){
    const response = await fetch('http://127.0.0.1:3000/api?name=tom&age=18')
    const clone1 = response.clone()
    const body = await clone1.json()
    console.log(body)
    const clone2 = response.clone()
    const bodyAgain = await clone2.json()
    console.log(bodyAgain)
}
fetchFun()

npm install whatwg-fetch --save

import 'whatwg-fetch'