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

 更新时间:2021-12-17 12:01:54   作者:佚名   我要评论(0)

一、?原生网络请求
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网络请求库的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
  • js跨域请求数据的3种常用的方法
  • 微信小程序网络请求的封装与填坑之路
  • vue项目中axios请求网络接口封装的示例代码
  • vue发送ajax请求详解
  • 浅谈Vue网络请求之interceptors实际应用
  • vue请求数据的三种方式

您可能感兴趣的文章:

相关文章

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

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

    一、?原生网络请求 1. XMLHttpRequest(w3c标准)? ? // 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch? ? // html5提供的对象,基
    2021-12-17
  • Vue+ElementUI怎么处理超大表单实例讲解

    Vue+ElementUI怎么处理超大表单实例讲解

    最近公司由于业务的调整,之前的超长表单的逻辑改动较多,所以我就打算重构了(之前是一个已离职的后台写的,也没有注释,一个组件写了4000+
    2021-12-17
  • Vue实现简易记事本功能

    Vue实现简易记事本功能

    本文实例为大家分享了Vue实现简易记事本功能的具体代码,供大家参考,具体内容如下 预览图: 功能如下: (1)输入任务并按下回车键,可将
    2021-12-17
  • .NET6新特性之 隐式命名空间引用

    .NET6新特性之 隐式命名空间引用

    早在 .NET 6 Preview 7版本中微软就已经引入隐式命名空间引用。在.NET Preview 7这个版本中这个功能是默认开启的,如果需要禁用它的化就需要
    2021-12-17
  • Vue Element-ui实现树形控件节点添加图标详解

    Vue Element-ui实现树形控件节点添加图标详解

    目录1.效果图2.树形表格绑定数据加标签3.所有代码其他实现总结1.效果图 2.树形表格绑定数据加标签 想要在树形控件的树节点加上图片或者elem
    2021-12-17
  • vue仿网易云音乐播放器界面的简单实现过程

    vue仿网易云音乐播放器界面的简单实现过程

    由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能。 前端简单的使用vue组
    2021-12-17
  • JavaScript闭包详解

    JavaScript闭包详解

    目录1.?什么是闭包2.?闭包的作用2.1) 记忆性2.2) 模拟私有变量3.?闭包的注意点总结1.?什么是闭包 闭包:函数本身和该函数声明时所处的环境状
    2021-12-17
  • 在.NET?6中使用日志组件log4net的方法

    在.NET?6中使用日志组件log4net的方法

    本文将简单介绍在.NET 6中使用log4net的方法,具体见下文范例。 1.首先新建一个ASP.NET Core空项目 2.通过Nuget包管理器安装下面两个包 lo
    2021-12-17
  • Vue在echarts?tooltip中添加点击事件案例详解

    Vue在echarts?tooltip中添加点击事件案例详解

    目录需求解决方法1、设置tooltip2、定义hookToolTip变量3、在methods中添加方法4、完整代码需求 需要在echarts tooltip点击学校的名称,跳转
    2021-12-17
  • Vue实现跑马灯样式文字横向滚动

    Vue实现跑马灯样式文字横向滚动

    本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤
    2021-12-17

最新评论