原生fetch()，Es6中的promise

最新推荐文章于 2023-09-20 00:20:33 发布

aflylong

最新推荐文章于 2023-09-20 00:20:33 发布

阅读量633

点赞数

分类专栏： javascript 文章标签： es6 javascript

本文链接：https://blog.csdn.net/aflylong/article/details/118809186

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

es6新方法fetch

fetch（）方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用promise，相比较XMLHttpRequest更加简洁。

Promise

promise是进行异步操作的一种解决方案，比传统的处理方法(回调函数/处理事件)更加合理，ES6将其加入语言标准，统一语法，原生提供了Promise，promise可以想象成一个装有各种结果的容器，里面装有某个时间返回的结构，可以在需要的时候拿取它并进行一些事件处理。

使用方法

在ES6中规定，Promise对象是一个构造函数，用来生成Promise实例
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
       resolve(value);//resolve在异步操作成功时调用，并将异步操作结果作为参数传递出去
       }else{
        reject(error);//reject在异步操作失败时调用，并将异步操作错误结果作为参数传递出去
       }
})
promise实例生成后可以用then()方法操作成功/失败的回调函数
promise.then(function(value){
 <!--成功的回调处理-->
},function(error){
 <!--失败的回调处理-->
})
Promise 新建后立即执行，用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数
function runAsync(){
    var promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()

基本的fetch请求

fetch('url地址')//第一个参数url是必须填的，
.then(function(res){
    //res中存放的是response响应内容
    //console.log(res.json())会打印一个promise对象
    //response是只能被读取一次的,console.log取一次，return取一次，会报错
    return res.json();//返回一个promise对象
    //  res.json()     返回的数据类型是json 格式
    //  res.text()     返回的是文本格式
    //  res.blob()     处理 二进制  主要针对 图片  以及 流
}).then(function(myJson){
    console.log(myjson)//数据在此处打印出来
    //前一个没有返回值则会显示undefined
})

执行第一个then方法中的return res.json();会返回一个新的Promise实例对象

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
//[[PromiseState]] promise状态：pending 初始状态、fulfilled/resolved 成功状态（一般指的是异步请求成功）、rejected 失败状态（一般指的是异步请求失败）
[[PromiseResult]]: Object
//[[PromiseResult]] promise结果/值：初始值是undefined、不论成功或者失败，成功的结果或者失败的原因都会赋值给他。

执行第二个then方法会根据前面promise对象的状态发生变化来调用的

结果是前一个then的返回值或者是报错原因，它的状态是前一个执行结果直接的映射，前一个执行不报错就是成功，执行报错就是失败，前一个没有返回值则会显示undefined,不管前一个promise的状态是成功还是失败都会将promise的结果/值传给后一个

解释两次then用法：

第一次then用法：then是根据promise的状态变化而执行的回调函数，promise的状态变化由resolve()函数决定（取到数据执行resolve）then的参数为resolve函数传递出来的数据，直接输出res是一个对象不是我们需要的数据，使用res.json()或者res.test()获取到我们需要的数据。
res.json（）/res.text（）获取到的是一个新的promise实例，arr.txt的值在[[[PromiseResult]]里面，但是直接取是取不出来的。没有方法取出来，
Promise的设计文档中说了，[[PromiseResult]]是个内部变量，外部无法得到，只能在then中获取。所以就会用到第二次then了

第一个then 的return返回值是一个promise实例对象，所以回调链转交给了新的实例对象，第二个then的回调函数参数为为PromiseValue的值，当返回值不是对象时，返回值是数据类型时，会将该返回值赋值给PromiseValue，供下次的then函数使用

fetch get请求传递参数

window.onload=function(){
	var params = ‘参数’//根据接口文档进行填写
    fetch("url地址"+"接口"+"?"+params)//第一个参数url是必须填的，
    .then(function(res){
        retun res.json();
    }).then(function(result)){
         console.log(result)   
    }
}

fetch post 请求传递与不传递写法一样

window.onload=function(){
	var params = {
        username:'username',
        content:'content'
    }//根据接口文档进行填写
    //第一个参数url - 请求的 URL
    fetch("url地址"+"接口",{
        method:'POST',//请求方式 method-支持 GET, POST, PUT, DELETE, HEAD
        body:JSON.stringify(data),//body -请求参数（JSON.stringify过的字符串或’name=jim\u0026age=22’格式)
        headers:{
            'content-type':'application/json'//headers-对应的Headers 对象
        },
         mode:'no-cors',//mode有三个取值same-origin 不允许跨域 cors 允许跨域,需服务器配合如 node.js no-cors 允许跨域，服务器不需要设置如上代码但不能将服务端数据返回需要注意得是cors不支持application/json
    })
    .then(function(res){
        retun res.json();
    }).then(function(result)){
         console.log(result)   
    }
}