vue网络请求方案原生网络请求和js网络请求库
更新时间：2021年11月23日 16:07:58 作者：tby_37
这篇文章主要为大家介绍了网络请求方案原生网络请求和js网络请求库的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
一、 原生网络请求
1. XMLHttpRequest（w3c标准）
// 没有promise时的产物
当时的万物皆回调，太麻烦
2. Fetch
// html5提供的对象，基于promise 因为promise的存在，为了简化网络请求。
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
二、 js网络请求库
axios
以promise类型返回 json 数据。
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使用Axios做ajax请求详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了antd table按表格里的日期去排序操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue组件传值过程接收不成功的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
本文将结合实例代码介绍Javascript结合Vue实现对任意迷宫图片的自动寻路，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue-cli3 karma单元测试的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要为大家详细介绍了Vue使用Echarts实现数据可视化的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
Vue中使用JWT进行身份认证也是一种常见的方式,它能够更好地保护用户的信息,本文主要介绍了Vue开发中Jwt的使用详解,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
监听事件是我们在使用vue.js的时候经常使用的一个功能，下面这篇文章主要介绍了Vue.js实战之通过监听滚动事件实现动态锚点 的相关资料，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
本文主要介绍了vue中三种不同插槽使用小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论