广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue网络请求方案原生网络请求和js网络请求库
  • 747
分享到

vue网络请求方案原生网络请求和js网络请求库

2024-04-02 19:04:59 747人浏览 安东尼
摘要

一、 原生网络请求 1. XMLHttpRequest(w3c标准)    // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch    // HTML5提供的

一、 原生网络请求

1. XMLHttpRequest(w3c标准)   

// 没有promise时的产物

当时的万物皆回调,太麻烦

2. Fetch   

// HTML5提供的对象,基于promise 因为promise的存在,为了简化网络请求。

使用 Fetch - WEB api 接口参考 | MDN

Fetch是新的ajax解决方案 Fetch会返回Promise对象。fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。

参数:

1、第一个参数是URL:

2、第二个设置请求的参数,是可选参数

3、返回使用了Promise 来处理结果/回调

fetch(url, options).then(res=>res.JSON()/text()).then(ret=>console.log(ret))

兼容性问题:

ie低版本不兼容Fetch怎么办? =》 用第三方的Fetch库【fetch-polyfill】

使用fetch进行网络请求 let url1  url2  两个地址同时执行完毕后才进行相关操作 Promise.all

let url1 不管它是否执行成功我都要去处理 Promise.finally

 

 

fetch封装网络请求

二、 js网络请求库

axiOS

以promise类型返回 json 数据。

文档:使用说明 · Axios 中文说明 · 看云

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和node.js中。

能拦截请求和响应,自动转换JSON数据。axios也是Vue作者推荐使用的网络请求库。


// axios.get/post/put/delete
axios.get(url,config) // config可以设置头信息
axios.post(url,data,config)
axios.put(url,data,config)
axios.delete(url,data,config)

或通过实例请求

 

通过实例请求,添加设置信息(常用)!

不通过实例做统一设置(不常用),因为是给所有人都设置


// 统一给axios设置
axios.defaults.timeout = 10000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.a = 'admin'

post提交


// post提交
axios.post(url, { id: 1, name: 'aaaa' }).then(res => console.log(res.data))

 或者    axios直接用 # 标准写法(也不常用)


// axios直接用
axios({
  url,
  method:'get',
  data:{}
}).then(res => console.log(res))

拦截器   切面编程

(流水线)   (中间件)

1. 请求拦截器(能调用多次)


axios.interceptors.request.use(config => {
  // 统一设置请求域名地址
  config.baseURL = 'http://localhost:3000'
  // 超时时间
  config.timeout = 1000
  // 设置头信息
  config.headers.token = 'mytoken login'
  return config;
}, err => Promise.reject(err))

2. 响应拦截器(处理、过滤)


axios.interceptors.response.use(response => {
  return response.data
}, err => {
  // 可以在响应拦截器中统一去处理,请求异常
  alert('请求失败了,请重新请求一次')
  return Promise.reject(err)
});

以上就是网络请求方案原生网络请求和js网络请求库的详细内容,更多关于原生网络请求和js网络请求库的资料请关注编程网其它相关文章!

--结束END--

本文标题: vue网络请求方案原生网络请求和js网络请求库

本文链接: https://www.lsjlt.com/news/158152.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue网络请求方案原生网络请求和js网络请求库
    一、 原生网络请求 1. XMLHttpRequest(w3c标准)    // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch    // html5提供的...
    99+
    2022-11-12
  • vue网络请求方案原生网络请求和js网络请求库的示例分析
    这篇文章主要介绍vue网络请求方案原生网络请求和js网络请求库的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、 原生网络请求1. XMLHttpRequest(w3c标准)  &nbs...
    99+
    2023-06-21
  • js中的原生网络请求解读
    目录一. XMLHttpRequer 对象1. 使用 XHR2. HTTP 头部3. GET 请求4. POST 请求5. XMLHttpRequest 标准2二. 进度事件1. l...
    99+
    2022-12-03
    js原生网络请求 js网络请求 js原生请求
  • Android 网络请求方式
    前言 最近需要将Android 项目接入物联网公司提供的接口,所以顺便给大家分享一下Android中我们常用的网络请求吧!提醒大家一下,我们遇到接口需求,一定要先在Postman上测试接口是否正确,然后再去项目上写程序来请求接口;否则,请求...
    99+
    2023-09-21
    android
  • vue网络请求写在哪
    Vue 是一款前端框架,它为我们提供了很多开发时需要的支持,其中之一就是网络请求的支持。Vue 的网络请求可以使用第三方库 Axios 或者 Vue 自带的 Ajax 库进行实现。在选择使用哪一种方式时,我们需要考虑项目的实际情况。本篇文章...
    99+
    2023-05-24
  • 【小程序】网络请求API介绍及网络请求的封装
    文章目录 网络请求基本演练和封装网络请求基本演练网络请求配置域名网络请求的封装 网络请求基本演练和封装 网络请求基本演练 微信提供了专属的API接口,用于网络请求: wx.req...
    99+
    2023-09-04
    小程序 网络 微信小程序
  • 【iOS_Swift_Alamofire实现网络请求】
    文章目录 前言导入库原生网络请求单例封装一个原生网络请求Alamofire用法Alamofire的返回响应将返回的data转为字典/字符串 总结 前言 学习swift继续延续之前...
    99+
    2023-09-16
    swift ios 开发语言 objective-c c++
  • Android网络请求之OkHttp
    OkHttp是一个第三方类库,用于android中请求网络。这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso和LeakCanary)。用于替代HttpUrlConnectio...
    99+
    2022-06-06
    okhttp android网络请求 Android
  • nodejs 异步网络请求
    Node.js是一个基于Chrome V8引擎构建的JavaScript运行时环境,可以在服务器端使用JavaScript编写程序,支持异步I/O操作,适合于构建高并发、低延迟的网络应用程序。在使用Node.js开发网络应用程序时,使用异步...
    99+
    2023-05-18
  • Flutter 将Dio请求转发原生网络库的实现方案
    目录背景实现方案实现步骤交互协议注意点背景 首先看到标题,相信大家已经血压飙升了,既然都用了Flutter,怎么还用原生的网络库呢?这不是多此一举么。emmmmm,当我看到这个需求的...
    99+
    2022-11-13
  • Android实现网络请求方法
    Android网络请求(1) ​ 安卓开发网络请求可谓是安卓开发的灵魂,如果你不会网络请求,那么你开发的应用软件就是一具没有灵魂的枯骨。 ​ 在安卓开发中进行网络请求和java中的网络请求有异曲同工之妙,但是安卓软件毕竟的安装在我们手机上的...
    99+
    2023-08-19
    android java jvm
  • Android Retrofit和Rxjava的网络请求
    Android  Retrofit和Rxjava的网络请求 去年的时候好多公司就已经使用Rxjava和Retrofit了,最近自自己学习了一下,感觉真的是很好用,让自...
    99+
    2022-06-06
    rxjava retrofit Android
  • android 网络请求库volley方法详解
    使用volley进行网络请求:需先将volley包导入androidstudio中 File下的Project Structrue,点加号导包   volley网络请...
    99+
    2022-06-06
    volley Android
  • python爬虫#网络请求request
    中文文档 http://docs.python-requests.org/zh_CN/latest/user/quickstart.html requests库 虽然Python的标准库中 urllib模块已经包含了平常我们使用的大多数功...
    99+
    2023-01-30
    爬虫 网络 python
  • Python爬虫之网络请求
    目录1.IP代理2.Cookie3.异常处理 1.IP代理 某些网站会检测一段时间内某IP的访问次数,若访问次数过多会禁止访问,这时需要设置一些代理服务器,每隔一段时间换一...
    99+
    2022-11-10
  • 网络异步请求之gevent
    我们知道对于网络请求这种IO bound的场景来说,最怕的就是某个请求阻塞了其余的操作,让并发性大大降低。今天就来介绍一款python下的并发库-gevent。 首先看一下他自己的介绍: gevent是一个基于libev的并发库。它为各种...
    99+
    2023-01-31
    求之 网络 gevent
  • JS实现网络请求的方式有哪些
    这篇文章将为大家详细讲解有关JS实现网络请求的方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。背景为了应对越来越多的测试需求,减少重复性的工作,有道智能硬件测试组基于 electron 开发了一系...
    99+
    2023-06-29
  • androidRetrofit2网络请求封装介绍
    目录1. Retrofit使用2. Retrofit封装3. RetrofitUtil使用最后1. Retrofit使用 Retrofit是一个现在网络请求框架,先来说一下怎么使用 ...
    99+
    2022-11-12
  • PHP如何实现网络请求
    这篇“PHP如何实现网络请求”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“PHP如何实现网络请求”文章吧。一、分析php发送...
    99+
    2023-07-02
  • uniapp网络请求异步同步
    在移动应用开发中,网络请求是常见的一项要求。uniapp作为一个跨平台开发框架,提供了网络请求的API,使得开发者能够方便地完成网络请求的操作。在网络请求中,异步和同步是两种不同的方式,下面将为大家介绍uniapp网络请求的异步和同步方式。...
    99+
    2023-05-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作