Fetch的使用

---

无业在家，就把一些知识总结下~~
今天来总结一下fetch的使用。一些fetch的概念大家可以自己百度下。

 declare function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

 type RequestInfo = Request | string;

fetch()是一个全局的函数，它有两个参数,第一个参数是请求的地址，第二个参数是可选，RequestInit是个对象格式如下:

interface RequestInit {
    body?: any;
    cache?: RequestCache;
    credentials?: RequestCredentials;
    headers?: HeadersInit;
    integrity?: string;
    keepalive?: boolean;
    method?: string;
    mode?: RequestMode;
    redirect?: RequestRedirect;
    referrer?: string;
    referrerPolicy?: ReferrerPolicy;
    window?: any;
}

简单讲下其中的一些属性。了解cache点我
credentials 跨域请求中需要带有cookie时, 可在fetch方法的第二个参数对象中添加credentials属性, 并将值设置为”include”.

fetch(url,{
   credentials: 'include'
});

mode这用于确定跨域请求是否导致有效的响应，每个类型的意思可以自行百度下。

type RequestMode = "navigate" | "same-origin" | "no-cors" | "cors";

Referrer-Policy

type ReferrerPolicy = "" | "no-referrer" | "no-referrer-when-downgrade" | "origin-only" | "origin-when-cross-origin" | "unsafe-url";

---

declare function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>;

fetch()的定义是这样的，返回一个Promise对象。Promise是一个异步操作对象，相当于java的future。字面上可以理解为允诺会返回一个Response的对象。他有两个方法，一个是then(),一个catch()。如下:

//then()如果请求成功,方法参数是一个函数 (response)=>{}  返回依然是一个 Promise<> 只不过他的泛型可以变换。方便链式调用
 then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;
//请求失败 走这个方法 方法参数是一个函数 (error)=>{}
catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;

下面来说一下fetch的使用方法，

  //js 好像不支持尾随闭包的简化写法  所以函数参数还得放到()里面写

  fetch('请求地址',{ 其他的请求配置 } ).then((response)=>{
      //处理结果
  }).catch( (error)=>{ } )


   //也可以使用ES7标准中的async/await 语法
  try{
      let response = await fetch('请求地址',{ 其他的请求配置 } )
      await response.json()
      ....
  } catch( error ){

 }

我个人会喜欢第二种写法。
下面是3个示例

//post请求  用户登录
postMethod() {
        fetch(SERVER_ROOT_PATH+"/webUser/login?phone=1801277****&password=****&jPushId=",{
            method: 'POST',
            keepalive: true,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        }).then((response)=> { return response.json() } ) .then((responseJson)=>{  
            if(responseJson.isOk === true ){ this.props.showGetResult(responseJson.user.name) }    
            if(responseJson.isFail === true ){ this.props.showGetResult(responseJson.info) } 
        }).catch((error)=>{  })
    }

//获取新闻列表
async getMethod() {
        try {
            let response = await fetch(SERVER_ROOT_PATH+"/webArticle/getArticles?page=1",{
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            });
            console.log("status ====> "+response.status);
            let responseJson = await response.json()
            var info = ""
            responseJson.list.forEach(element => {
                info = info+"\n"+element.title
            }); 
            this.props.showGetResult(info) 
        } catch (error) { }
    }

//form提交 一个头像上传的请求
async formMethod() {
        let formData = new FormData()
        formData.append('phone','15951137869') 
        formData.append('image',{ uri:'http://facebook.github.io/react-native/img/header_logo.png', type: 'multipart/form-data', name: 'aaa123.jpg'})
         try {
            let response = await fetch(SERVER_ROOT_PATH+"/webUser/changeAvatar",{
                method: 'POST',
                body: formData
            });
            let responseJson = await response.json()
            if(responseJson.isOk === true ){ this.props.showImageResult(SERVER_ROOT_PATH+responseJson.avatarImage) }    
            if(responseJson.isFail === true ){ this.props.showGetResult(responseJson.info) }
        } catch (error) { }

fetch简单用法就总结到这。。