美文网首页
fetch发送异步请求

fetch发送异步请求

作者: duans_ | 来源:发表于2019-06-21 21:50 被阅读0次

    使用promise的方式

            fetch('http://api.duans.top/')
                .then(function (response) {
                    // response是一个数据流, 无法直接使用; 需要使用.json()方法对齐进行转换
                    console.log(response);
                    // .json()方法本身是基于promise的, 所以无法直接接收其返回值; 必须使用.then()传入一个成功回调函数
                     response.json().then((res) => {
                         console.log(res);
                     })
                })
    

    async/await

            fetch('http://api.duans.top/')
                .then(async function (response) {
                    // response是一个数据流, 无法直接使用; 需要使用.json()方法对齐进行转换
                    console.log(response);
                    // .json()方法本身是基于promise的, 所以无法直接接收其返回值; 可使用async/await将其转换成同步操作
                    const res=await response.json();
                    console.log(res);
                })
    

    使用fetch发送其他类型(POST)的请求,并向数据接口提交数据

    var url = 'https://example.com/profile';
    var data = {username: 'example'};
    
    // 将{}(对象)=>queryString(查询字符串); 服务器端无法直接对json进行处理
    function obj2str(data){
      if(typeof(data)=='object'){
        var arr=[];
        for(var key in data){
             arr.push(key+'='+data[key])
         }  
        return arr.join('&');
      }
      return data;
    }
    
    fetch(url, {
      method: 'POST', // or 'PUT'
      body: obj2str(data), // 此处需要一个查询字符串:username=example&age=30
      headers: new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    }).then(res => res.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response));
    
    • 使用URLSearchParams快速构建查询字符串
    var params=new URLSearchParams();
    params.append('name','zs');
    params.append('age',30);
    // 打印结果:name=zs&age=30
    console.log(params);
    
    fetch(url, {
      method: 'POST', // or 'PUT'
      body: params, // 此处需要一个查询字符串:username=example&age=30
      headers: new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    }).then(res => res.json())
    .then(response => console.log(response));
    

    使用fetch上传文件

    var formData = new FormData();
    var fileField = document.querySelector("input[type='file']");
    
    formData.append('username', 'abc123');
    formData.append('avatar', fileField.files[0]);
    
    fetch('https://example.com/profile/avatar', {
      method: 'PUT',
      body: formData
    })
    .then(response => response.json())
    .catch(error => console.error('Error:', error))
    .then(response => console.log('Success:', response));
    

    fetch支持的参数

    function postData(url, data) {
      // Default options are marked with *
      return fetch(url, {
        body: JSON.stringify(data), // must match 'Content-Type' header
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: {
          'user-agent': 'Mozilla/4.0 MDN Example',
          'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // *client, no-referrer
      })
      .then(response => response.json()) // parses response to JSON
    }
    
    

    fetch-jsonp发送跨域请求

    fetchJsonp('/users.jsonp', {
        // 设置回调函数名; 默认为callback 
        jsonpCallback: 'cb',
      })
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        console.log('parsed json', json)
      }).catch(function(ex) {
        console.log('parsing failed', ex)
      })
    

    参考文档

    相关文章

      网友评论

          本文标题:fetch发送异步请求

          本文链接:https://www.haomeiwen.com/subject/mzcpqctx.html