基于promise用于浏览器和node.js的http客户端的axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
axios中文文档:https://blog.csdn.net/qq_36538012/article/details/81942990
axios-w3cschool-菜鸟教程:http://www.27900.com/axios
Vue 官方建议用 axios 代替 vue-resourse,所以在这里不做vue-resourse的探讨;
axios 使用基本方法和个别参数
axios({
url: 'http://jsonplaceholder.typicode.com/users',
method: 'get',
responseType: 'json', // 默认的
data: {
//'a': 1,
//'b': 2,
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
})
相关依赖
安装
1:npm安装
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
一切环境依赖搭建好之后
下面来写个例子:axios请求本地json
1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。)
访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹
图片.png
2:test.json数据格式如下:
图片.png
{
"name":"wnagxiaoting",
"age":24
}
3:写一个axios
getData() {
axios.get('../../static/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
4:整体代码如下:
<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('../../static/test.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
5:前台显示:
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
基于promise用于浏览器和node.js的http客户端的axios的更多相关文章
- 编写浏览器和Node.js通用的JavaScript模块
长期以来JavaScript语言本身不提供模块化的支持, ES6中终于给出了 from, import等关键字来进行模块化的代码组织. 但CommonJS.AMD等规范已经被广为使用,如果希望你的Ja ...
- Node.js 使用http客户端向网站请求数据并保存
app.js代码: // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // 内置文件处理模块 var fs=requir ...
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户 ...
- 基于Unix Socket的可靠Node.js HTTP代理实现(支持WebSocket协议)
实现代理服务,最常见的便是代理服务器代理相应的协议体请求源站,并将响应从源站转发给客户端.而在本文的场景中,代理服务及源服务采用相同技术栈(Node.js),源服务是由代理服务fork出的业务服务(如 ...
- 基于 Markdown 的开源的 Node.js 知识库平台
Raneto 是一个免费,开源的 Node.js 知识库平台,基于静态 Markdown 文件实现. Raneto 可以被称为静态网站生成器,因为它并不需要数据库支持.所有的内容都存储在 Markdo ...
- 如何写兼容浏览器和Node.js环境的Javascript代码
如果有打开过jQuery的源码(从1.11及以后),或者Vue.js.React.js的源码,都会在文件的前面看见这样一段代码: ( function( global, factory ) { &qu ...
- 一个基于React整套技术栈+Node.js的前端页面制作工具
pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...
- Memlab,一款分析 JavaScript 堆并查找浏览器和 Node.js 中内存泄漏的开源框架
Memlab 是一款 E2E 测试和分析框架,用于发现 JavaScript 内存泄漏和优化机会. Memlab 是 JavaScript 的内存测试框架.它支持定义一个测试场景(使用 Puppete ...
- node.js – 服务器端的客户端证书验证,DEPTH_ZERO_SELF_SIGNED_CERT错误
我正在使用节点0.10.26并尝试建立与客户端验证的https连接. 服务器代码: var https = require('https'); var fs = require('fs'); proc ...
随机推荐
- Mysql信息数据库:Information_schema
1. Information_schema information_schema是mysql的信息数据库. 通过该库能够查看mysql以下的数据库,表.权限等信息. 在数据库中会默认生成这个库.inf ...
- [COI2007] [luogu P1823] Patrik 音乐会的等待 解题报告 (单调栈)
题目链接:https://www.luogu.org/problemnew/show/P1823 题目: N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人. ...
- 33.unique_ptr独享内存智能指针
#include <iostream> #include <memory> #include <string> #include <vector> us ...
- BZOJ 3931 Dijkstra+网络流
思路: (我能说按照题意模拟么) 用long long inf 要开大--. //By SiriusRen #include <queue> #include <cstdio> ...
- P3227 [HNOI2013]切糕
题目描述 经过千辛万苦小 A 得到了一块切糕,切糕的形状是长方体,小 A 打算拦腰将切糕切成两半分给小 B.出于美观考虑,小 A 希望切面能尽量光滑且和谐.于是她找到你,希望你能帮她找出最好的切割方案 ...
- stuff(param1, startIndex, length, param2)
1.作用 stuff(param1, startIndex, length, param2)将param1中自startIndex(SQL中都是从1开始,而非0)起,删除length个字符,然后用pa ...
- tensorflow-gpu
1.Cuda 查看Cuda支持的GPU型号:https://developer.nvidia.com/cuda-gpus 下载cuda:https://developer.nvidia.com/cud ...
- 移动端 Modal 组件开发杂谈
Vant 是有赞开发的一套基于 Vue 2.0 的 Mobile 组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端 Modal 组件(在有赞该组件被称为 Popup )需要注意的一 ...
- STM32的Flash
STM32中存储区分为:随机存取存储器RAM和只读存储器ROM. 其中: RAM为常说的内存,比如手机的2G内存4G内存等,就是程序跑起来的时候所占用的存储空间,特点是掉电数据丢失. ROM为常说的硬 ...
- 《AndroidStudio每日一贴》11. 重构之提炼为常量
提炼为常量是从暂时变量高速提炼出静态常量,这也是我们经常使用的重构手段. 很多其它有用技巧请查看<AndroidStudio有用指南> 操作步骤: ➤ 菜单条: Refactor -> ...