React 之使用 fetch

一.安装。

1.根据文档提示，用 npm 安装的话，执行npm install whatwg-fetch --save即可安装。
2.为了兼容老版本浏览器，还需要安装npm install es6-promise --save。安装完成之后，注意看一下package.json中的变化。

二.基本使用.

1.get 的基本使用

import 'whatwg-fetch'
import 'es6-promise'
然后这样就可以发起一个 get 请求。这里的fetch是引用了插件之后即可用的方法，使用非常简单。方法的第一个参数是 url 第二个参数是配置信息。
    var result = fetch('/api/1', {
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*'
        }
    });
以上代码的配置中，credentials: 'include'表示跨域请求是可以带cookie（fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'。
这和 XHR 的 withCredentials 一样），headers可以设置 http 请求的头部信息。

fetch 方法请求数据，返回的是一个 Promise 对象，接下来我们就可以这样用了——完全使用Promise的语法结构。
    result.then(res => {
        return res.text()
    }).then(text => {
        console.log(text)
    })
或者这样用
    result.then(res => {
        return res.json()
    }).then(json => {
        console.log(json)
    })
注意，以上两个用法中，只有res.text()和res.json()这里不一样————这两个方法就是将返回的 Response 数据转换成字符串或者JSON格式，这也是 js 中常用的两种格式。

2.post 的基本使用

import 'whatwg-fetch'
import 'es6-promise'
然后用 fetch 发起一个 post 请求（有method: 'POST'），第一个参数是 url，第二个参数是配置信息。注意下面配置信息中的headers和body的格式。
    var result = fetch('/api/post', {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 注意 post 时候参数的形式
        body: "a=100&b=200"
    });
fetch 提交数据之后，返回的结果也是一个 Promise 对象，跟 get 方法一样，因此处理方式也一样，上面刚描述了，因此不再赘述。
抽象get和post
如果每次获取数据，都向上面一样写好多代码，就太冗余了，我们这里将 get 和 post 两个方法单独抽象出来。参见get.js和post.js的源码。
需要注意的是，post.js中，将参数做了处理。因为上面的代码中提到，body: "a=100&b=200"这种参数格式是有要求的，而我们平时在 js 中使用最多的是 JSON 格式的数据，
因此需要转换一下，让它更加易用。
这两个方法抽象之后，接下来我们再用，就变得相当简单了。参见 ./app/fetch/data.js
    // '/api/1' 获取字符串
    var result = get('/api/1')

    result.then(res => {
        return res.text()
    }).then(text => {
        console.log(text)
    })

3.get.js的抽象

import 'whatwg-fetch'
import 'es6-promise'

export function get(url) {
  var result = fetch(url, {
      credentials: 'include',
      headers: {
          'Accept': 'application/json, text/plain, */*'
      }
  });

  return result;
}

4.post.js的抽象

import 'whatwg-fetch'
import 'es6-promise'

// 将对象拼接成 key1=val1&key2=val2&key3=val3 的字符串形式
function obj2params(obj) {
    var result = '';
    var item;
    for (item in obj) {
        result += '&' + item + '=' + encodeURIComponent(obj[item]);
    }

    if (result) {
        result = result.slice(1);
    }

    return result;
}

// 发送 post 请求
export function post(url, paramsObj) {
    var result = fetch(url, {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: obj2params(paramsObj)
    });

    return result;
}

5.实例应用

import { get } from './get.js'
import { post } from './post.js'

export function getData() {
    // '/api/1' 获取字符串
    var result = get('/api/1')

    result.then(res => {
        return res.text()
    }).then(text => {
        console.log(text)
    })

    // '/api/2' 获取json
    var result1 = get('/api/2')

    result1.then(res => {
        return res.json()
    }).then(json => {
        console.log(json)
    })
}

export function postData() {
    // '/api/post' 提交数据
    var result = post('/api/post', {
        a: 100,
        b: 200
    })

    result.then(res => {
        return res.json()
    }).then(json => {
        console.log(json)
    })
}

6.官方提供POST　Json数据的方法

Post JSON

fetch('/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

原文链接：http://www.imooc.com/article/15003