Js中使用fetch进行异步请求

更新日期: 2018-12-22阅读: 3.4k标签: fetch

在 AJAX 时代,进行 api 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。 现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行一些异步请求时,都可以使用 fetch 进行完美的网络请求。


Ajax请求

普通的Ajax请求,用XHR发送一个json请求一般是这样的:

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = 'json';
xhr.onload = function(){
    console.log(xhr.response);
};
xhr.onerror = function(){
    console.log("error")
}
xhr.send();

使用fetch实现的方式:

fetch(url).then(function(response){
    return response.json();
}).then(function(data){
    console.log(data)
}).catch(function(e){
    console.log("error")
})    

也可以用async/await的方式

try{
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
} catch(e){
    console.log("error")
}

用了await后,写异步代码感觉像同步代码一样爽。await后面可以跟Promise对象,表示等待Promise resolve()才会继续下去执行,如果Promise被reject()或抛出异常则会被外面的try...catch捕获。


使用fetch

fetch的主要优点是

语法简洁,更加语义化基于标准的Promise实现,支持async/await同构方便

但是也有它的不足

fetch请求默认是不带cookie的,需要设置fetch(url, {credentials: 'include'})服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时,fetch才会被reject.

fetch语法:

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

具体参数案例:

//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()

import 'whatwg-fetch'

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

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

参数说明

url

定义要获取的资源。这可能是:一个 USVString 字符串,包含要获取资源的 URL。一个 Request 对象。

options(可选)

一个配置项对象,包括所有对请求的设置。可选的参数有:

method: 请求使用的方法,如 GET、POST。

headers: 请求的头信息,形式为 Headers 对象或 ByteString。

body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

mode: 请求的模式,如 cors、 no-cors 或者 same-origin。

credentials: 请求的 credentials,如 omit、same-origin 或者 include。

cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

response

一个 Promise,resolve 时回传 Response 对象:

属性:

status (number) - HTTP请求结果参数,在100–599 范围

statusText (String) - 服务器返回的状态报告

ok (boolean) - 如果返回200表示请求成功则为true

headers (Headers) - 返回头部信息,下面详细介绍

url (String) - 请求的地址

方法:

text() - 以string的形式生成请求text

json() - 生成JSON.parse(responseText)的结果

blob() - 生成一个Blob

arrayBuffer() - 生成一个ArrayBuffer

formData() - 生成格式化的数据,可用于其他的请求

其他方法:

clone()

Response.error()

Response.redirect()

response.headers

has(name) (boolean) - 判断是否存在该信息头

get(name) (String) - 获取信息头的数据

getAll(name) (Array) - 获取所有头部数据

set(name, value) - 设置信息头的参数

append(name, value) - 添加header的内容

delete(name) - 删除header的信息

forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息


使用实例

//获取css里ul的id属性
let uldom = document.getElementById("students");
//单独创建一个json文件,获取地址
let url = "data.json";

function main(){
    fetch(url).then(respone=>{
        return respone.json();
    }).then(students=>{

        let html = ``;
        for(let i=0, l=students.length; i<l; i++){
            let name = students[i].name;
            let age = students[i].age;
            html += `
                <li>姓名:${name},年龄:${age}</li>
                `
        }

        uldom.innerHTML = html;
    });
}

main();

结合await最终代码

let uldom = document.getElementById("students");
let url = "data.json";

async function main(){
    let respone = await fetch(url);
    let students = await respone.json();

let html =``;
for(let i=0, l=students.length; i<l; i++){
    let name = students[i].name;
    let age = students[i].age;
    html += `
    <li>姓名:${name},年龄:${age}</li>
`
}
uldom.innerHTML = html;
}
main();

data.json文件内容如下:

[
    {"name":"张三","age":"3"},
    {"name":"李万","age":"1"},
    {"name":"王二","age":"4"},
    {"name":"二狗","age":"3"},
    {"name":"狗蛋","age":"5"},
    {"name":"牛娃","age":"7"}
]

运行后结果是:

姓名:张三,年龄:3
姓名:李万,年龄:1
姓名:王二,年龄:4
姓名:二狗,年龄:3
姓名:狗蛋,年龄:5
姓名:牛娃,年龄:7

链接: https://fly63.com/article/detial/7012

Fetch -- http请求的另一种姿势

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据,不注重分离的原则。而Fetch API是基于Promise设计,专为解决XHR问题而出现。fetch API看起来简单,却是js语法不断增强提高带来的改善。

JavaScript中fetch接口的用法使用

fetch就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

当fetch遇到302状态码,会发生什么?

当fetch遇到302状态码,会发生什么?fetch不能拦截302,浏览器会自动从302响应的头信息的重定向地址中取到数据。针对认证的情况,后端可以返回401状态码,让前端去检查返回的状态码并据此执行相应操作。

Fetch使用

Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用 过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和 灵活的功能集。Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。

fetch使用的常见问题及其解决办法

fetch默认不携带cookie配置其 credentials 项,其有3个值:omit: 默认值,忽略cookie的发送;same-origin: 表示cookie只能同域发送,不能跨域发送;include: cookie既可以同域发送,也可以跨域发送

fetch API

fetch:一个获取资源的接口,类似于ajax,是基于 Promise之上设计,旧版本IE 完全不支持,须借助 polyfill来兼容,提供了对 Request 和 Response 对象的通用定义

fetch使用,ajax替代方案

Fetch 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

TypeScript Fetch封装使用

Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源

通过fetch发送 post 请求下载文件

最近遇到一个下载的需求,由于 url 参数太长(常用的下载方法 a 标签或者 location.href 的方法都是 get 请求,get 请求参数长度有限制),无法下载,考虑了好几种方案,最终还是觉得通过 ajax 的 POST 方法进行下载,比较容易实现

Fetch API速查表:9个最常见的API请求

对于Fetch API我相信你已经用过它们很多次了,但是你是否还记得语法?如果能避免在旧项目中寻找半年前使用过的特定请求的语法,岂不更好?在本文中,我将列出9个最常见的Fetch API请求

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!