fetch + async await 使用原生JS发送网络请求
由于现在主流浏览器支持Fetch API,无需引用其他库就能实现AJAX,一行代码就搞定,可以说是非常方便了。
export default {
name: 'HelloWorld',
data() {
return {
items: []
}
},
mounted() {
this.getData()
},
methods: {
async getData() {
this.items = await (await fetch('http://localhost:8081/list')).json()
}
}
}
封装使用:
...
mounted() {
api.getData().then(res => {
this.items = res
}).catch(err => {
console.log(err)
})
},
...
// src/api/index.js const BASE_API = process.env.BASE_API export const http = (type, url, data) => {
url = BASE_API + url
let options = {}
if (type === 'post') {
options = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ data: data })
}
} else if (type === 'get') {
if (data && typeof data === 'object') {
const paramArray = []
Object.keys(data).forEach(key => paramArray.push(key + '=' + data[key]))
if (url.indexOf('?') === -1) {
url += '?' + paramArray.join('&')
} else {
url = '&' + paramArray.json('&')
}
options = { method: 'GET' }
} else if (!data) {
options = { method: 'GET' }
} else {
alert('参数有误')
}
}
return fetch(url, options)
} export const getData = async(data) => await (await http('get', '/list', data)).json()
浏览器支持:
fetch + async await 使用原生JS发送网络请求的更多相关文章
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- 原生JS发送Ajax请求、JSONP
一.JS原生Ajax Ajax=异步Javascript+XML: ajax是一种数据请求的方式,不需要刷新整个页面.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax的核心 ...
- python 学习笔记之手把手讲解如何使用原生的 urllib 发送网络请求
urllib.urlopen(url[,data[,proxies]]) : https://docs.python.org/2/library/urllib.html python 中默认自带的网络 ...
- pythone函数基础(13)发送网络请求
需要导入urllib模块,request模块发送网络请求有两种方法 第一种方法# from urllib.request import urlopen# from urllib.parse impor ...
- 如何实现 Https拦截进行 非常规“抓包” 珍惜Any 看雪学院 今天 前段时间在自己做开发的时候发现一个很好用的工具,OKHttp的拦截器(何为拦截器?就是在每次发送网络请求的时候都会走的一个回调)大概效果如下:
如何实现 Https拦截进行 非常规“抓包” 珍惜Any 看雪学院 今天 前段时间在自己做开发的时候发现一个很好用的工具,OKHttp的拦截器(何为拦截器?就是在每次发送网络请求的时候都会走的一个回调 ...
- 了解 Fetch API与Fetch+Async/await
背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...
- js 发送异步请求
js用XMLHttpRequest发送异步请求 发送GET请求 var xhr = new XMLHttpRequest(); xhr.open('GET',url);//url为请求地址 xhr.r ...
- 使用 async await 封装微信小程序HTTP请求
1. 编写将普通回调函数形式的方法转换为promise方法的promisic方法 // util.js const promisic = function (func) { return functi ...
- node.js 发送http 请求
自己研究了一下 node.js 的 http模块 下面为想服务器发送请求的代码 ,通过学习了解http 请求的过程 ,node.js 对http请求的原始封装比较低,以前php 可以用$_GET , ...
随机推荐
- 九度OJ 1138:进制转换 (进制转换)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2388 解决:935 题目描述: 将一个长度最多为30位数字的十进制非负整数转换为二进制数输出. 输入: 多组数据,每行为一个长度不超过30 ...
- css zoom 属性
oom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用. 不过值得注意的一点就是火狐浏览器不支持zoom属性 ...
- 使用YOURAPP做移动应用开发
一.简单介绍: YourAPP是一款执行在智能设备上的程序和模块. 它将设备底层的某些操作封装成能够供JavaScript语言调用的方式.同一时候将界面的设计和开发以Web的形式开放给使用者. 从而将 ...
- ubuntu下配置rails环境遇到的错误
1.Could not find gem 'sqlite3 (>= 0)' in any of the gem sources listed in your Gemfile 解决:sudo ge ...
- appium(10)-iOS predictate
iOS predictate It is worth looking at ’-ios uiautomation’ search strategy with Predicates. UIAutomat ...
- PAT天梯赛 L2-027. 名人堂与代金券 【排序】
题目链接 https://www.patest.cn/contests/gplt/L2-027 思路 在输入的时候 判断分数 是否符合领取代金券条件 如果符合 SUM 就加上对应的代金券价值 然后在对 ...
- poj 1743 Musical Theme【后缀自动机】
不是很神的一道题,一般. 先差分,最后答案需要+1. 一个right集的len即为该right集的最长相同后缀,考虑到不能重复,所以处理一下该right集的最大与最小的ri,最后答案ans=max(a ...
- [RK3288][Android6.0] 调试笔记 --- 软硬键盘同时使用【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/78748313 Platform: RK3288 OS: Android 6.0 Kernel ...
- C++引用详解【转】
本文转载自:http://www.cnblogs.com/gw811/archive/2012/10/20/2732687.html 引用:就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作 ...
- Bestcoder round 18---A题(素数筛+素数打表+找三个素数其和==n)
Primes Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...