159 lines
3.9 KiB
Markdown
159 lines
3.9 KiB
Markdown
# fetch api
|
||
|
||
* ajax 是基于XMLHttpRequest 实现的, fetch 是基于 promise 原生 api
|
||
* axios 是一个基于 Promise 的 HTTP 客户端，但它底层使用了 XMLHttpRequest
|
||
|
||
```js
|
||
fetch("http://example.com/movies.json")
|
||
.then((response) => response.json())
|
||
.then((data) => console.log(data));
|
||
```
|
||
|
||
> Fetch 比起 Axios 来讲几乎没有任何优势（除了浏览器原生支持）
|
||
> Fetch 是原生的 API, 并不是对 XMLHttpRequest 的封装, 类比 xhr
|
||
> Axios 是对 XMLHttpRequest 的封装, 是一个第三方库
|
||
|
||
## 语法
|
||
|
||
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
|
||
|
||
```js
|
||
fetch(input,[init]);
|
||
// input——定义要获取的资源，可以是：
|
||
// 一个 USVString 字符串，包含要获取资源的 URL。
|
||
// 一个 Request 对象。
|
||
|
||
// init—— 可选 | 一个配置项对象，包括所有对请求的设置。可选的参数有：
|
||
var myInit={
|
||
//请求的 body 信息 //如：Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象
|
||
body: JSON.stringify(data), //这里必须匹配 'Content-Type' //注意 GET 或 HEAD 方法的请求不能包含 body 信息。
|
||
|
||
//请求的 cache 模式。//如：default, no-cache, reload, force-cache, only-if-cached
|
||
cache: 'no-cache',
|
||
|
||
//请求的 credentials。//包括：omit、same-origin，include(允许跨域请求时携带 cookie)
|
||
credentials: 'same-origin',
|
||
|
||
//请求的头信息
|
||
headers: {
|
||
'user-agent': 'Mozilla/4.0 MDN Example',
|
||
'content-type': 'application/json'
|
||
},
|
||
|
||
//请求使用的方法 //如：GET, POST, PUT, DELETE等
|
||
method: 'POST',
|
||
|
||
//请求的模式 //如 cors、 no-cors 或者 same-origin。
|
||
mode: 'cors',
|
||
|
||
//重定向模式 //如 follow|自动重定向, error|如果产生重定向将自动终止并且抛出一个错误, manual|手动处理重定向
|
||
redirect: 'follow',
|
||
|
||
//USVString //如 no-referrer、client或一个 URL。默认是 client
|
||
referrer: 'no-referrer',
|
||
}
|
||
```
|
||
|
||
## get
|
||
|
||
```js
|
||
fetch('http://example.com/movies.json')
|
||
.then(response => response.json())
|
||
.then(data => console.log(data));
|
||
```
|
||
|
||
```js
|
||
// 发请求获取学生信息
|
||
/**
|
||
* fetch(): ajax的升级版
|
||
* 参数: 1. 请求地址
|
||
* 2. 请求信息
|
||
* */
|
||
fetch(URL + '/api/students')
|
||
.then(res => {
|
||
console.log('res', res)
|
||
// res.json(): 把响应的json对象转换成js对象, 也是返回promise
|
||
if (res.statusText == 'OK') {
|
||
res.json()
|
||
} else {
|
||
throw new Error('数据加载失败')
|
||
console.log(res.status + ' ' + res.statusText)
|
||
}
|
||
})
|
||
.then(data => {
|
||
console.log('data', data)
|
||
})
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
```
|
||
|
||
使用 `async await`
|
||
|
||
```js
|
||
// 获取学生列表
|
||
const fetchStuList = useCallback(async () => {
|
||
try {
|
||
setLoading(true)
|
||
setError(null)
|
||
const res = await fetch(URL + '/api/students')
|
||
if (res.statusText === 'OK') {
|
||
const data = await res.json()
|
||
studentsPatch({ type: 'init', data: data.data })
|
||
} else {
|
||
throw new Error('数据加载失败')
|
||
}
|
||
} catch (error) {
|
||
setError(error.message)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [])
|
||
|
||
// 组件渲染完成后只执行一次
|
||
useEffect(() => {
|
||
fetchStuList()
|
||
}, [])
|
||
```
|
||
|
||
## post
|
||
|
||
```js
|
||
var data={
|
||
id:'1',
|
||
}
|
||
fetch('http://example.com/api',{
|
||
method:'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body:JSON.stringify(data)
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => console.log(data));
|
||
```
|
||
|
||
## delete
|
||
|
||
```js
|
||
fetch('http://example.com/movies.json',{
|
||
method: 'DELETE'
|
||
})
|
||
.then(response => response.json())
|
||
```
|
||
|
||
## 表单
|
||
|
||
```js
|
||
const formData = new FormData();
|
||
formData.append('username', 'John');
|
||
formData.append('email', 'john@example.com');
|
||
|
||
fetch('https://example.com/api/form', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.text())
|
||
.then(data => console.log(data))
|
||
.catch(error => console.error('Error:', error));
|
||
``` |