js学习笔记（十一）

JavaScript

JavaScript 异步AJAX的fetch()方法

Fetch是一种处理http请求和响应的新一代ajax API。不仅具有XMLHttpRequest的功能，而且更具可扩展性和高效性，可以处理requests和response内容并实现管道化的操作，提供了全局的fetch()方法，属于es6的标准方法。ref, google以及Promise对象。

一、fetch()用于GET请求

• fetch()方法主要有三个功能：创建请求对象&发送请求&**返回**promise对象并解析为响应对象；
• fetch()传入目标url（包括带query的参数？&合成的url），并利用.then()管道来异步处理响应

//fetch利用GET方式进行请求，并处理响应内容
fetch('url').then(//then方法()处理满足或者拒绝的promise对象  
//包含两个回调函数参数，分别是处理正确响应时的json转换和处理错误响应的函数
    response=>{
    if(response.ok){return response.json()};//response ok,json化响应信息
    throw new Error('Request failed!'); //请求失败
    },  //回调一
    networkError=>{console.log(networkError.message)} //回调二，网络错误回调函数,完成第一个then()方法
).then(    //处理成功的response
    jsonResponse => {
    //处理响应信息的代码
    //process response
    }
)//第二个then()方法结束。

参考模板代码处理图

二、fetch()方法用于POST请求

POST请求的方式与GET十分相似，不同的地方在于将fetch的参数换成了setting对象，对象中包含目标url,请求方法method以及json格式的请求体数据body等属性。

//fetch方法同时也可以用于POST方法，不同的是要是用设置对象来对请求方法和内容进行设置，与$.ajax()的POST设置类似
//fetch('url',{seetingobjetc}),POST方法需要传入两个参数，第一个是目标URL，第二个是方法的设置对象，包括method和数据body等。
fetch('url',{   //第二个参数为设置对象
        method: 'POST',
        body: JSON.stringfy({id: '200'})  //json数据
            }
).then(         //随后对数据进行处理，then(successcallback, errorcallback),第一个参数为处理成功响应的回调函数，第二个参数为处理错误响应的函数
response=>{
    if(response.ok){return response.json} //响应成功返回json类型的数据
    throw new Error('requests failed') //不成功抛出错误
    }, // 处理结束，由于是then的参数需要逗号，分割
networkError => console.log(networkError.message)  //第二个函数处理请求失败
//-----第一个then()结束-------
).then( //第二个then接收第一个then成功时返回的json响应对象并处理some process code...
jsonResponse=> {
    console.log(jsonResponse)
    //.....porcess code.......//
    return jsonResponse //例子，返回json
}
)

//简化的写法
fetch('url',{settingObj}).then(
success_call_back,failure_call_back).then(
response_process_func)
//第一个then()负责处理请求的成功/失败，第二个then(  )负责响应成功后内容处理

三、 async/await 关键字

async关键字修饰的函数将返回一个Promise对象。作为ES7中的新标准，可以替代原先的Promise对象的fetch().then()链方法,并将异步作为同步来处理，进一步简化异步的同步调用。
async function()函数表达式定义异步函数,并在其中包含await关键字来暂停等待,使得赋值操作在异步操作后才进行，看起来像同步操作来执行异步操作一个详细讲解(需要进一步学习!)

//使用示例方法
async function test(){
    try{
        let response =  await fetch('url',{setting obj})  //POST方法的时候需要对象来设置请求参数，await关键字用来等待异步操作的resolve，随后赋值，将异步Promise中的then链用await来代替
        if(response.ok){
            let jsonResponse = await response.json()
            // process json响应
            return jsonResponse
        }
        throw new Error('Request Failed!')  //threw out error message抛出错误信息

    }   //try结束
    catch(error){
        console.log(error)
    }//捕捉错误信息并处理

}//函数结束

tips
1.fetch()方法返回Promise对象的解释,类似于一个诺言，如果成功>#$%^@,如果失败>^*&@%&
2.fetch讲解
3.js对象与json对象的区别，json键名和js属性名
- json 的键名要用双引号括起，这是 json 语法规定的,数据格式
- js 对象的属性名可以不用引号括起，这是 js 语法约定的，编程语言中的对象
澄清1,2,python字典的键名也需要引号，只有对象的属性才不许要引号，可以用object.prop来访问
4.aysnc关键字以及await关键字的应用1,2,3,4,5，理解1，与先前比较，es7,与python的比较
5.js编译器用于生成浏览器兼容代码