fetch的基本用法

fetch可以更加简单的获取数据，可以看作Ajax的升级版，是基于Promise实现的

1、使用语法

    <script>
        fetch('http://localhost:3000/fdata').then(function(data) {
            return data.text();  // 通过调用text返回promise对象
        }).then(function(data) {
            console.log(data); // 得到真正的结果
        })
    </script>

2、fetch请求参数

　　method(String): http请求方法，默认为GET(GET、POST、PUT、DELETE)

　　body(String): http的请求参数

　　headers(Object): http的请求头，默认为{}

• （1）get请求方式的参数传递 (传统方式)

    fetch('http://localhost:3000/books?id=123', {
                method: 'get'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

• get请求方式的参数传递 (Restful方式)

    fetch('http://localhost:3000/books/123', {
            method: 'get'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

• （2）delete请求方式的参数传递

    fetch('http://localhost:3000/books/789', {
            method: 'delete'
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

• （3）post请求方式的参数传递 （字符串类型参数）

    fetch('http://localhost:3000/books', {
            method: 'post',
            body: 'uname=lisi&pwd=123',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

• post请求方式的参数传递 （json对象类型参数）

    fetch('http://localhost:3000/books', {
            method: 'post',
            body: JSON.stringify({
                uname: 'kun',
                pwd: '321'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

• （4）put请求方式的参数传递（字符串类型参数）

    fetch('http://localhost:3000/books/768', {
            method: 'put',
            body: 'uname=lisi&pwd=123',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

• put请求方式的参数传递（json对象类型参数）

    fetch('http://localhost:3000/books/768', {
            method: 'put',
            body: JSON.stringify({
                uname: 'kun',
                pwd: '321'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data) {
            return data.text();
        }).then(function(data) {
            console.log(data);
        })

3、fetch响应结果

    fetch('http://localhost:3000/json')
            .then(function(data) {
                return data.json(); // 返回json对象形式
            }).then(function(data) {
                console.log(data);
            })

    fetch('http://localhost:3000/json')
            .then(function(data) {
                return data.text();  // 返回字符串类型
            }).then(function(data) {
                console.log(data);
            })

原文地址：http://www.cnblogs.com/daixiaoyang/p/16860031.html