fetch使用

React 整理 专栏收录该内容
11 篇文章 0 订阅

为何使用fetch?

        前端开发中,向服务器请求数据通常用三种:XMLHttpRequest、fetch、jQuery的ajax

        XMLHttpRequest、fetch是浏览器的原生API,fetch在IE和低版本的浏览器支持不友好

        jQuery的ajax其实就是对XMLHttpRequest的封装实现

 

建议在项目中引用第三方封装好的,以避免有些网站无法工作 fetch github

step1: yarn add whatwg-fetch

step2: import {fetch as fetchPolyfill} from 'whatwg-fetch'

step3: fetchPolyfill(api)
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        console.log('parsed json', json)
      }).catch(function(ex) {
        console.log('parsing failed', ex)
      })

fetch使用

简单的使用:

fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

全面使用:

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100–599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String

  return response.text()
}, function(error) {
  error.message //=> String
})

参数解释:

       url: 请求的地址

      options: (请求配置)

            method: HTTP请求方法,默认为GET

            body: HTTP的请求参数

            headers: HTTP的请求头,默认为{}

          credentials: 默认为omit,忽略的意思,也就是不带cookie;还有两个参数,same-origin,意思就是同源请求带cookie;include,表示无论跨域还是同源请求都会带cookie

      ps: body这里做一些解释说明,body可接收的类型有如下几种:String、URLSearchParams、FormData、Blob、ArrayBuffer、TypedArray、DataView

其他数据结构需要预先编码为上述类型之一。例如,JSON.stringify(data)可用于将数据结构序列化为JSON字符串。

请注意,HTTP服务器通常要求使用正文发布的请求也通过Content-Type请求标头指定其类型。

 

       response:

        Response表示来自服务器的HTTP响应。通常,Response不是手动构造的,但可作为已解析的promise回调的参数。

        属性:

            status (number) - 100-599范围内的HTTP响应代码
            statusText (字符串) - 服务器报告的状态文本,例如“未授权”
            ok(布尔值) - 如果status是HTTP 2xx则为真
            headers(标题)
            url (串)

        方法:访问响应主体的每个方法都返回一个Promise,当关联的数据类型准备好时,它将被解析。

            text() - 将响应文本生成为String
            json() - 产生结果 JSON.parse(responseText)
            blob()- 产生一个Blob
            arrayBuffer()- 产生一个ArrayBuffer
            formData()- 产生可以转发到另一个请求的FormData

 

以下代码是在实际开发中自己封装的一个方法

// 这里摄者一些请求公用的header
function cfg() {
  const token = Token ? `Bearer ${Token}` : '';
  const header = {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    Authorization: token,
    Uuid: DeviceId,
  };
  return header;
}

export default class HTTP {
  static get(url, params) {
    if (params) {
      const paramsArray = [];
      // 拼接参数
      Object.keys(params).forEach(key => paramsArray.push(`${key}=${params[key]}`));
      if (url.search(/\?/) === -1) {
        url += `?${paramsArray.join('&')}`;
      } else {
        url += `&${paramsArray.join('&')}`;
      }
    }
    // fetch请求
    return fetch(url, {
      method: 'GET',
      headers: cfg(),
    })
      .then(response => response.json())
      .then(responseJson => responseJson)
      .catch((error) => {
        console.error(error);
      });
  }

  static post(url, params) {
    // fetch请求
    return fetch(url, {
      method: 'POST',
      headers: cfg(),
      // body: params,
      body: JSON.stringify(params),
    })
      .then(response => response.json())
      .then(responseJson => responseJson)
      .catch((error) => {
        console.log(`error = ${error}`);
      });
  }

  static file(url, data) {
    const photo = { uri: data };
    const formdata = new FormData();
    formdata.append('product', { uri: photo.uri, name: 'image.jpg', type: 'multipart/form-data' });

    return fetch(url, {
      method: 'post',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
      },
      body: formdata,
    })
      .then(response => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        console.log('image uploaded');
        return responseJson;
      })
      .catch((err) => {
        console.log(err);
      });
    // })
  }


  static put(url, params) {
    // fetch请求
    return fetch(url, {
      method: 'PUT',
      headers: cfg(),
      // body: params,
      body: JSON.stringify(params),
    })
      .then(response => response.json())
      .then(responseJson => responseJson)
      .catch((error) => {
        console.log(`error = ${error}`);
      });
  }

  static delete(url) {
    // fetch请求
    return fetch(url, {
      method: 'DELETE',
      headers: cfg(),
      // body: params,
      // body: JSON.stringify(params),
    })
      .then(response => response.json())
      .then(responseJson => responseJson)
      .catch((error) => {
        console.log(`error = ${error}`);
      });
  }
}

调用

import $ from '../utils/https';

export function getMusic(params) {
  try {
    return $.get(`${HOST}/videos`, params);
  } catch (error) {
    console.error(error);
  }
}




// 实际页面调用
async handleFetchdata() {
    const datas = await getMusic()
    console.log(datas)
}

 

 

  • 0
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值