fetch网络请求、axios网络请求

最新推荐文章于 2024-01-27 11:49:07 发布
最新推荐文章于 2024-01-27 11:49:07 发布
阅读量1.3k 收藏 2
点赞数 1
分类专栏： Ajax、http和跨域 文章标签： 网络 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/121340827
版权

目录

一、fetch网络请求（了解）

1.1 fetch的基本使用

1.2 get请求方式

1.3 post请求方式

1.4 fetch的简单封装

二、axios网络请求（常用）

2.1 axios特点

2.2 GET请求

2.3 POST请求

2.4  直接使用axios发起请求

2.5 全局的 axios 默认值

 

 

一、fetch网络请求（了解）

fetch和Ajax一样都是用于请求网络数据的

fetch是es6新增的，基于promise的网络请方法

1.1 fetch的基本使用

        fetch(url,{options})

        .then()

        .catch();

1.2 get请求方式

    fetch("./41.php?teacher=lwj&age=20", {
        method: "get"
    }).then(function (res) {
        // console.log(res);
        // console.log(res.text());
        // return res.text();
        return res.json();
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

41.php，

<?php
$teacher = $_GET["teacher"];
$age = $_GET["age"];
$arr = array("name"=>$teacher, "age"=>$age);
$data = json_encode($arr);
echo $data;
?>

1.3 post请求方式

    fetch("./41.php", {
        method: "post",
        body: JSON.stringify({teacher:"zq", age:666})
    }).then(function (res) {
        // console.log(res.text());
        // return res.text();
        return res.json();
    }).then(function (data) {
        console.log(data);
        console.log(typeof data);
    }).catch(function (e) {
        console.log(e);
    });

41.php，

<?php

$rws_post = $GLOBALS["HTTP_RAW_POST_DATA"];
$mypost = json_decode($rws_post);
$teacher = (string)$mypost->teacher;
$age = (string)$mypost->age;
$arr = array("name"=>$teacher, "age"=>$age);
$data = json_encode($arr);
echo $data;

?>

1.4 fetch的简单封装

    class EasyHttp{
        static obj2str(data) {
            data = data || {};
            data.t = new Date().getTime();
            var res = [];
            for(var key in data){
                res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
            }
            return res.join("&");
        }
        static get(url, params){
            return new Promise(function (resolve, reject) {
                let newUrl = url;
                if(params !== undefined && params instanceof Object){
                    let str = EasyHttp.obj2str(params);
                    newUrl += "?" + str;
                }
                fetch(newUrl, {
                    method: "get"
                }).then(function (res) {
                    resolve(res.json());
                }).catch(function (e) {
                    reject(e);
                })
            })
        }
        static post(url, params){
            return new Promise(function (resolve, reject) {
                fetch(url, {
                    method: "post",
                    body: JSON.stringify(params)
                }).then(function (res) {
                    resolve(res.json());
                }).catch(function (e) {
                    reject(e);
                })
            })
        }
    }
    let obj = {
        teacher: "lwj",
        age: 24
    }
    EasyHttp.post("./41.php", obj)
    .then(function (data) {
        console.log(data);
    })
    .catch(function (e) {
        console.log(e);
    });

41.php，

<?php
//echo "it666";

// $teacher = $_GET["teacher"];
// $age = $_GET["age"];
// $arr = array("name"=>$teacher, "age"=>$age);
// $data = json_encode($arr);
// echo $data;

$rws_post = $GLOBALS["HTTP_RAW_POST_DATA"];
$mypost = json_decode($rws_post);
$teacher = (string)$mypost->teacher;
$age = (string)$mypost->age;
$arr = array("name"=>$teacher, "age"=>$age);
$data = json_encode($arr);
echo $data;

?>

二、axios网络请求（常用）

Axios 是一个基于 promise 的 HTTP 库网络请求插件，专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

2.1 axios特点

  • 可以用在浏览器和 node.js 中
  • 支持 Promise API
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

2.2 GET请求

axios 发起 get 请求的语法：

 axios.get('url', { params: { /*参数*/ } }).then(callback)

 

示例：

<script src="./axios.js"></script>
    axios.get("./41.php?teacher=lwj&age=20")
        .then(function (res) {
            console.log(res.data);
        })
        .catch(function (e) {
            console.log(e);
        });

41.php，

<?php
//echo "it666";

$teacher = $_GET["teacher"];
$age = $_GET["age"];
$arr = array("name"=>$teacher, "age"=>$age);
$data = json_encode($arr);
echo $data;

?>

2.3 POST请求

 axios 发起 post 请求的语法：

 axios.post('url', { /*参数*/ }).then(callback)

 

示例：

<script src="./axios.js"></script>
    axios.post("./41.php", {
        teacher: "lwj",
        age: 666
    })
        .then(function (res) {
            console.log(res.data);
        })
        .catch(function (e) {
            console.log(e);
        });

41.php，

<?php
//echo "it666";

$rws_post = $GLOBALS["HTTP_RAW_POST_DATA"];
$mypost = json_decode($rws_post);
$teacher = (string)$mypost->teacher;
$age = (string)$mypost->age;
$arr = array("name"=>$teacher, "age"=>$age);
$data = json_encode($arr);
echo $data;

?>

2.4  直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

 axios({
     method: '请求类型',
     url: '请求的URL地址',
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(callback)

示例：GET请求 

   
 axios({
     method: 'GET',
     url: 'http://www.yyyy',
     params: { // GET 参数要通过 params 属性提供
         name: 'zs',
         age: 20
     }
 }).then(function(res) {
     console.log(res.data)
 })

示例：POST请求

   
 axios({
     method: 'POST',
     url: 'http://www.yyyy',
     data: { // POST 数据要通过 data 属性提供
         bookname: '程序员的自我修养',
         price: 666
     }
 }).then(function(res) {
     console.log(res.data)
 })

2.5 全局的 axios 默认值

在企业开发中项目分为 : 开发阶段和部署阶段, 这两个阶段项目存储的位置是不同的

项目上线前存储在企业内部测试服务器上, 项目上线后存储在企业正式服务器上

所以如果每次请求都将请求的地址写在请求中, 那么项目上线时需要大量修改请求地址

为了解决这个问题, 我们可以配置一个全局URL根地址, 项目上线时只需要修改根地址即可

例如: 上线前地址是: http://127.0.0.1/jQuery/Ajax/41.php

          上线后地址是: http://192.199.13.14/jQuery/Ajax/41.php

    axios.defaults.timeout = 2000; //全局请求超时时间
    axios.defaults.baseURL = "http://127.0.0.1"; // 全局请求根地址
    axios.post("/jQuery/Ajax/41.php", {
        name: "lwj",
        age: 20
    })
        .then(function (res) {
            console.log(res.data);
        })
        .catch(function (e) {
            console.log(e);
        });
<?php
//echo "it666";

$rws_post = $GLOBALS["HTTP_RAW_POST_DATA"];
$mypost = json_decode($rws_post);
$name= (string)$mypost->name;
$age = (string)$mypost->age;
$arr = array("name"=>$name, "age"=>$age);
$data = json_encode($arr);
echo $data;

?>

小白小白从不日白
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
fetch详细讲解
@必意玲
07-28 3274
使用 fetch 可以方便地向服务器发送请求，并将响应返回给客户端。你可以使用 fetch 获取文本、JSON、图像和文件等数据，并进行各种处理。fetch 还支持流式传输和取消请求等高级功能，使得处理大型数据集和长时间运行的操作变得更加简单和可靠。fetch API 也是 Javascript 中常用的 API 之一，它提供了一组方法和属性，可以在浏览器端与服务器进行通信。通过 fetch API，你可以轻松地使用 fetch 协议进行数据传输，并对请求和响应进行操作和处理。
vue封装Axios
qq_43482627的博客
09-30 1849
Axios的封装 安装axios npm install axios; // 安装axios 引入 一般在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。 // 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据 imp
AJAX(二) axios、fetch发送请求，同源策略，跨域解决方案等
DogEgg_001的博客
06-10 2076
如果非同源(即跨域)，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问，因此拦截的是客户端发出的请求回来的数据接收，即。还有很多细节不熟悉，等以后遇到了具体的再补吧，学前端进度还不到30%...继续加油！等标签都可以跨域加载,而不受浏览器的同源策略的限制, 这些带src属性的标签每次加载的时候,实际上都是浏览器发起一次。通过src属性加载的资源,浏览器限制了JavaScript的权限，使其不能读写src加载返回的内容。头的机制，该机制通过允许服务器标示除了它自己以外的其他。
前端axios fetch 解决接口请求响应数据返回快慢不均导致的数据错误问题
hyupeng1006的博客
05-22 2261
实时搜索都会面临一个通用的问题，就是：浏览器请求后台接口都是异步的，如果先发起请求的接口后返回数据，列表/表格中显示的数据就很可能会是错乱的。会引发的bug如下：搜索的时候，连续快速输入或者删除关键字，搜索结果和搜索关键字不匹配。怎么解决呢？在想解决方案之前，得想办法必现这个问题，靠后台接口是不现实的，大部分情况下后台接口都会很快返回结果。
fetch的GET和POST请求
LxyingINGing的博客
01-27 1982
fetch的GET和POST请求
javascript实现fetch请求返回的统一拦截
10-15
本篇文章主要探讨如何使用JavaScript实现fetch请求返回的统一拦截。 首先，我们需要理解拦截器的目的。拦截器主要用于在请求发送前或响应接收后执行一些通用操作，例如添加身份验证令牌、处理网络错误等。在axios库...
基于 axios、fetch 等实现的http 请求响应方法库
最新发布
07-07
【作品名称】：基于 axios、fetch 等实现的http 请求响应方法库 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：http ...
vue axios请求拦截实例代码
10-18
Vue Axios 请求拦截是一种在发送HTTP请求前和接收响应后执行特定操作的技术，它可以用来统一处理全局的错误，添加额外的请求头，或者在特定条件下取消请求。在Vue项目中，Axios是一个常用的HTTP库，它提供了拦截器...
使用到的网络请求包组件
11-21
在IT行业中，网络请求包组件是开发Web应用时不可或缺的一部分，它们使得应用程序能够与服务器进行数据交换，实现各种网络功能，如获取数据、发送表单信息等。在本篇文章中，我们将深入探讨“网络请求包组件”的核心...
对异步请求xhr、ajax、axios、fetch的区别比较
01-08
本文将对比分析四种常见的异步请求方式：XMLHttpRequest（xhr）、jQuery的$.ajax、axios以及fetch，以便理解它们各自的特点和适用场景。 1. XMLHttpRequest（xhr） XMLHttpRequest对象是最早的异步请求手段，它...
Axios fetch的基本用法
qq_45715615的博客
03-12 1754
fetch API通过promise接口来实现的。 fetch( ' / abc' ) .then (data=>{ return data.text (); //return返回的是primose对象 }) .then (ret=>{ //注意这里得到的才是最终的数据 console.log (ret) ; }); 1.fetch常用配置选项 method(String):HTIP请求方法，默认为GET(GET、POST、PUT、DELETE) body(String):H..
Fetch和Axios我该用哪个？哪个更适合HTTP请求？
前端全栈开发者
11-29 2234
前端开发最重要的部分之一是通过发出HTTP请求与后端进行通信，我们有几种方法可以异步地在Javascript中进行API调用。 几年前，大多数应用程序都使用Ajax发送HTTP请求，Ajax代表异步Javascript和XML。但是现在，开发人员通常会决定在fetch() API和Axios之间进行选择。 在本文中，我想比较这两种方法，并简要介绍一下基本知识和语法。除此之外，我还将比较在两种情况下以及在错误处理中将数据转换为JSON格式的过程。我还将讨论HTTP拦截和下载进度。 开始吧！ Fetch概述和.
fetch 基本用法（fetch 处理后端数据）
一人码农
03-10 625
fetch 基本用法
fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）
YY的博客
12-14 8735
fetch向后端请求数据：get/post/put/patch/delete方式、解决catch不能主动捕获错误问题（超详细笔记）
必备-6.axios和fetch用法
pinganaaa的博客
11-20 1387
文章目录必背-6.axios和fetch用法axiosFetch同源与跨域 必背-6.axios和fetch用法 axios 1.axios是什么？ axios官方网址：http://www.axios-js.com/zh-cn/docs/ axios是什么：axios是基于Promise封装的ajax库，基于这个类库发送ajax请求，默认就是基于promise管理的，核心是XMLHttpRequest ==axios基于请求方式分为了:get/head/delete/opations/post/put/
fetch简介和axios介绍（引用链接、get和post请求方式、自定义请求、请求拦截、官网）
AIWWY的博客
05-19 1168
目录 fetch fetch的get请求方式 fetch的post请求方式 axios 引用链接 axios的get请求方式 axios的post请求方式 fetch XMLHttpRequest是一个设计粗糙的API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。fetch即用于解决这些问题，然后fetch是基于promise设计的顾搭配下面方式使用，promise不懂得可以看这个链接https://blog.csdn.net/AIWWY/article/details/1
网络请求axios与fetch的区别
m0_63135041的博客
04-21 3587
网络请求axios与fetch的区别
fetch发送网络请求
sdhiush的博客
08-04 223
fetch发送网络请求
fetch 如何请求常见数据格式
weixin_34362991的博客
06-11 480
一 序言 在 传统Ajax 时代，进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱，对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方法，它不仅提供了一种简单，合乎逻辑的方式来跨网络异步获取资源，而且可以很容易地被其他技术使用，例如 Service Workers。 二 与Ajax对比 使用Ajax请求一...
请求fetch和axios的区别
09-10
C知道：fetch和axios都是用于发送HTTP请求的工具，但它们有一些区别。 1. API设计：fetch是基于浏览器内置的fetch函数实现的，而axios是一个独立的JavaScript库。fetch使用Promise进行异步操作，而axios使用了更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值