fetch请求html页面,html自带的fetch 异步请求 api

最简单的fetchAPI调用如下：

fetch('https://api.github.com/users/chriscoyier/repos')

.then(response => response.json())

.then(data => {

// data就是我们请求的数据

console.log(data)

});

fetch兼容性问题：可以用下面两行代码解决兼容性

{% codeblock lang:js%}

fetch("xxxxx")

.then(function(response){

// do something...

})

{% endcodeblock %}

fetch发送数据：

fetch(url,options);

第二个参数为一个对象：

{

method: 'post',

headers: {

'Content-Type': 'application/json'

},

body: JSON.stringify(content)

}

请求如果失败了，fetch还会继续执行.then()代码块，所以我们需要catch一下错误，

fetch('some-url')

.then(response => {

if (response.ok) {

return response.json()

} else {

// Find some way to get to execute .catch()

}

});

else需要把错误抛出或者返回一个reject的promise对象；

else {

throw new Error('something went wrong!')

}

// rejecting a Promise

else {

return Promise.reject('something went wrong!')

}

综上：

fetch('some-url')

.then(response => {

if (response.ok) {

return response.json()

} else {

return Promise.reject('something went wrong!')

}

})

.then(data => console.log('data is', data))

.catch(error => console.log('error is', error));

还有报错要返回状态信息：所以可以这么改下：

fetch('some-url')

.then(response => {

if (response.ok) {

return response.json()

} else {

return Promise.reject({

status: response.status,

statusText: response.statusText

})

}

})

.catch(error => {

if (error.status === 404) {

// do something about 404

}

})