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

 更新时间:2021年11月23日 16:07:58   作者:tby_37  
这篇文章主要为大家介绍了网络请求方案原生网络请求和js网络请求库的过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步

一、 原生网络请求

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

相关文章

  • vue ssr服务端渲染(小白解惑)

    vue ssr服务端渲染(小白解惑)

    这篇文章主要介绍了vue ssr服务端渲染(小白解惑),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue-router配合ElementUI实现导航的实例

    vue-router配合ElementUI实现导航的实例

    下面小编就为大家分享一篇vue-router配合ElementUI实现导航的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue组件中点击按钮后修改输入框的状态实例代码

    vue组件中点击按钮后修改输入框的状态实例代码

    要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态,需要的的朋友参考下
    2017-04-04
  • Vue如何实现多页面配置以及打包方式

    Vue如何实现多页面配置以及打包方式

    这篇文章主要介绍了Vue如何实现多页面配置以及打包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 浅谈Vue下使用百度地图的简易方法

    浅谈Vue下使用百度地图的简易方法

    本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue 组件通信的多种方式

    vue 组件通信的多种方式

    这篇文章主要介绍了vue 组件通信的几种方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue 中使用print.js导出pdf操作

    vue 中使用print.js导出pdf操作

    这篇文章主要介绍了vue 中使用print.js导出pdf操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue实现把接口单独存放在一个文件方式

    vue实现把接口单独存放在一个文件方式

    这篇文章主要介绍了vue实现把接口单独存放在一个文件方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue3中多个弹窗同时出现的解决思路

    Vue3中多个弹窗同时出现的解决思路

    这篇文章主要介绍了Vue3中多个弹窗同时出现的解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue中点击按钮下载文件的实现方式

    vue中点击按钮下载文件的实现方式

    这篇文章主要介绍了vue中点击按钮下载文件的实现方式,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论