1. fetch基本使用

  • fetch API是新的ajax解决方案,fetch会返回Promise
  • fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象
  • fetch(url, options).then()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Fetch API 基本用法
fetch(url).then()
第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果
*/
fetch('http://localhost:3000/fdata')
.then(function (data) {
// text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
return data.text();
})
.then(function (data) {
// 在这个then里面我们能拿到最终的数据
console.log(data);
});

2. fetch API中的HTTP请求

  • fetch(url, options).then()
  • HTTP协议,它给我们提供了很多的方法,如POSTGETDELETEUPDATEPATCHPUT
    • 默认的是GET请求
    • 需要在options对象中,指定对应的method:请求使用的方法
    • post和普通请求的时候,需要在options中设置请求头headersbody

2.1 GET

(1) 传统URL

1
2
3
4
5
6
7
8
9
10
11
12
fetch('http://localhost:3000/books?id=123', {
// get 请求可以省略不写 默认的是GET
method: 'get',
})
.then(function (data) {
// 它返回一个Promise实例对象,用于获取后台返回的数据
return data.text();
})
.then(function (data) {
// 在这个then里面我们能拿到最终的数据
console.log(data);
});

(2) restful形式的URL

1
2
3
4
5
6
7
8
9
10
fetch('http://localhost:3000/books/456', {
// get 请求可以省略不写 默认的是GET
method: 'get',
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data);
});

2.2 DELETE

删除id789的数据

1
2
3
4
5
6
7
8
9
fetch('http://localhost:3000/books/789', {
method: 'delete',
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data);
});

2.3 POST

(1) body为字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fetch('http://localhost:3000/books', {
method: 'post',
// 传递数据
body: 'uname=lisi&pwd=123',
// 设置请求头
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data);
});

(2)bodyJSON对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456',
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data);
});

2.4 PUT

bodyJSON对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789',
}),
headers: {
'Content-Type': 'application/json',
},
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data);
});

3. fetchAPI中响应格式

fetch来获取数据,如果响应正常返回,首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSONBLOB或者TEXT等等。

1
2
3
4
5
6
7
8
9
10
11
fetch('http://localhost:3000/json')
.then(function (data) {
// return data.json(); // 将获取到的数据使用 json 转换对象
return data.text(); // // 将获取到的数据 转换成字符串
})
.then(function (data) {
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname, obj.age, obj.gender);
});

4. 关注分离的设计思想

1
2
3
4
5
6
7
try {
const response = await fetch(`/api1/search/users2?q=${keyWord}`);
const data = await response.json();
console.log(data);
} catch (error) {
console.log('请求出错', error);
}