如何使用fetch

Fetch API  提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单，合乎逻辑的方式来跨网络异步获取资源。

1.fetch()返回Promise对象

一般情况下返回一个已经resolve的Promise对象，只有在网络故障。或则请求被阻止时才会是reject状态的Promise。所以说返回404,500等也会返回resolve状态的Promise。

而resolve的是一个Response对象（Response是Promise对象resolve的结果）。

a)语法：

　　fetch(input[,init]);

　　input：定义要获取的资源，一般情况会写请求的地址

　　init：一个配置项对象，包括所有对请求的设置。可选的参数有

　　　　method: 请求方式：get或post


　　　　headers：请求头信息

　　　　一般设置方式：

　　　　

const default= {
　　credentials: 'include',
};
 
newOptions.headers = {
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=utf-8',
      ...default,
}

　　　　mod : 请求的模式，如 cors、 no-cors 或者 same-origin。

　　　　credentials: 此方式为设置是否发送Cookie，omit不发送，same-origin，同源的才发送，include不管是否同源都会发送cookie

　　　　body：  请求参数，一般情况使用JSON.stringify({参数对象})。

　b) Response对象

　　属性：

　　　　status 状态码，eg：200

　　　　ok 返回一个boolean代表成功还是失败

　　方法：

　　　　Response实现了Body故而可以使用以下方法：

　　　　json()    读取Response对象，并返回一个解析为json格式的Promise对象。之前看这里有点绕，后来才发现Promise对象可以resolve另外一个Promise对象　

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("promise1")
    },3000)
})
 
//先打印出promise2，3秒后打印出promise1
let promise2 = new Promise((resolve,reject)=>{
    resolve(promise1);
    console.log("promise2");
}).then((res)=>{
    console.log(res); //三秒后打印出promise1
})

使用fetch请求资源：

mork.json

{
    "name":"张三丰",
    "age":"20",
    "gender":"男"
}

index.js

fetch("./mork.json").then(response=>{
    console.log(response);
    if(response.status===200){
        return response.json();
    }
}).then(response=>{
    console.log(response);
})

结果：

　　　后面的就好理解了

　　　　text()　　返回一个被解析为USVString格式的promise对象。

　　　　formData()　　返回一个被解析为FormData格式的promise对象

　　　　blob()　　返回一个被解析为Blob格式的promise对象

　

有些属性和方法可能用的也不是很多，确实要用的话可以再查文档。

---

说到Promise又不得不提到异步函数 async function

　　异步函数返回的也是Promise对象，并且在异步函数中可以使用await

　　await操作符是用来等待一个Promise对象，并且只能在async function使用。

　　async function 返回值隐式的传递给Promise.resolve

//定义一个Promise供异步函数中await使用
let promise  = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("hello world")
    },3000)
}).then((data)=>{ //为了测试await是不是等待的最后结果加了then
    return data.split("");
})
 
async function test(params) {
    let res = await promise;
    return res;
}
 
//async function 返回的是异步对象，所以可以继续用then处理
test().then((data)=>{
    console.log(data);
})