fetch 请求 api

fetch 请求 api

定义请求函数 calculate

function calculate() {
// 函数代码
}

请求 api

fetch("<https://open.exchangerate-api.com/v6/latest>")

需要注意的是：fetch 是一个异步操作

具体来讲，一般程序执行，是按照顺序依次从上往下执行，比如

console.log("第一次执行");
console.log("第二次执行");
console.log("第三次执行");

一步一步去执行

但是对于，fetch 操作

fetch 还正在执行了，就继续执行下一行来。

可以理解为在当前时间线上，重新开辟出了一条时间线去运行程序

fetch("<https://open.exchangerate-api.com/v6/latest>")
.then(console.log(res));

异步官方解释：JavaScript 会在请求发送后继续执行后续的代码，而不会等待请求完成

还需要注意一点的是

console 虽然也是一个js内置的函数

内置的函数，是不能直接作为 then 的参数的

错误写法：

function calculate() {
    fetch("<https://open.exchangerate-api.com/v6/latest>")
    .then(console.log(res));
}

官方解释：.then() 是 Promise 对象提供的方法，它期望接收一个函数作为参数。

正确写法

function daYin(res) {
    console.log(res);
}

function calculate() {
    fetch("<https://open.exchangerate-api.com/v6/latest>")
    .then(daYin(res)); // 不能这样写
		.then(daYin); // 应该这样写
}

calculate;

then 函数

then 函数会把上一行的输出，作为 then 函数自身的参数的输入

比如上面所举例的，fetch 请求之后的结果我们并没有给定一个变量去存储，而是直接在 then 里面写了 daYin(res) 传入 res 参数

官方：

hen 函数会在前一个操作（比如异步操作，如 fetch）完成后执行，将前一个操作的结果作为参数传递给 then 中的回调函数。

fetch 发出请求后，.then(daYin) 表示在请求完成后调用 daYin 函数

并将请求的结果传递给 daYin 函数。

不需要在**.then(daYin(res))** 中调用 daYin

因为 then 会自动将结果传递给回调函数。

记住： then 的参数始终期望传入一个一个回调函数。