fetch浅谈

引入fetch相关依赖

import 'whatwg-fetch'  

import 'es6-promise'
export function getData() {
    // '/api/1' 获取字符串
    var result = fetch('/api/1', {
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*'
        }
    });
    result.then(res => {
        return res.text()
    }).then(text => {
        console.log(text)
    })

    // '/api/2' 获取json
    var result1 = fetch('/api/2', {
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*'
        }
    });
    result1.then(res => {
        return res.json()
    }).then(json => {
        console.log(json)
    })
}

export function postData() {
    // '/api/post' 提交数据
    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"
    });
    result.then(res => {
        return res.json()
    }).then(json => {
        console.log(json)
    })

}

优化代码 封装一下

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;
}

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;
}

//最后引用在

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)
    })
}