fetch基本使用

好好前端

已于 2022-09-02 10:21:36 修改

阅读量376

点赞数 1

分类专栏：前端请求文章标签： javascript json 前端

于 2022-09-02 09:53:44 首次发布

本文链接：https://blog.csdn.net/qq_35856778/article/details/126656204

版权

前端请求专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了如何在JavaScript中使用fetch API进行网络请求，并结合async/await语法进行异步操作。通过示例展示了从发送请求到解析JSON数据的完整流程，还提供了一个request.js实用函数，用于封装fetch调用，简化数据获取。最后，演示了如何在实际应用中导入并使用这个request函数来执行POST请求。

摘要由CSDN通过智能技术生成

基本使用

fetch(url,options) // url:请求地址,options:请求参数
  .then(response => response.json()) // 将返回的数据json化
  .then(data => console.log(data)); // 对返回的json对象进行操作

与async ，await结合使用

async function postData(url = '', options= {}) {
  const response = await fetch(url, options)
  return response.json();
}
postData(url, options)
  .then(data => {
    console.log(data);
  });

写一个简单的request.js文件

function parseJSON(response) {
  return response.json();
}
export default async function request(url, options) {
  return (
    fetch(url, options)
      .then(parseJSON)
      .then((data) => {
        return data;
      })
      .catch((err) => ({ err }))
  );
}

使用示例

import request from "@/utils/request";
export async function getData(param) {
  return request(url, {
    method: "POST",
    body: JSON.stringify(param),
  });
}