day08-Axios
Axios
1.基本说明
Axios是一个基于promise的网络请求库，作用于node.js和浏览器中。它是 isomorphic 的 (即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
- axios是独立于vue的一个项目，不是vue的一部分
- axios通常和Vue一起使用，实现ajax操作
- Axios是一个基于promise的HTTP库
Axios库文件：
使用axios需要引入axios库文件
可以直接引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
也可以下载axios.min.js，然后在本地引入
访问上面的地址，另存为js文件即可
2.应用实例
在Vue项目中使用axios，从服务器获取json数据，显示在页面
为了简化，使用json文件来模拟后端交互的数据
1.response.data.json：
{
"success": true,
"message": "成功",
"data": {
"items": [
{
"name": "牛魔王",
"age": 800
},
{
"name": "红孩儿",
"age": 500
},
{
"name": "蜈蚣精",
"age": 200
}
]
}
}
2.在项目中导入vue.js和axios.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios的应用实例</title>
</head>
<body>
<!--页面视图-->
<div id="app">
<h1>{{msg}}</h1>
<table border="1px" width="200px">
<tr>
<td>名字</td>
<td>年龄</td>
</tr>
<tr v-for="monster in monsterList">
<td>{{monster.name}}</td>
<td>{{monster.age}}</td>
</tr>
</table>
</div>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "妖怪信息列表",
monsterList: []//表示妖怪信息的数组
},
methods: {//自定义方法
list() {//发出ajax请求，获取数据-axios
/*
1.axios.get()表示发出一个ajax请求
2."http://localhost:63342/axios/data/response.data.json" 表示请求的url
根据实际情况填写
3.axios发出ajax请求的基本语法是
axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)
(1)如果get请求成功后，就进入第一个then()
(2)可以在第一个then()中继续发出ajax请求（和promise基本一致）
(3)如果有异常，会进入到catch(箭头函数)中处理
4.list方法在生命周期函数created()中调用比较好
（这个阶段的data和 methods已经初始化结束，可以访问，但dom结构未初始化，页面未渲染）
*/
axios.get("http://localhost:63342/axios/data/response.data.json")
.then(responseDate => {//如果发出的ajax请求成功后，就会执行then()的箭头函数
// console.log("responseDate=>", responseDate);
// console.log("responseDate.data=>", responseDate.data);
// console.log("responseDate.data.data=>", responseDate.data.data);
console.log("responseDate.data.data.items=>", responseDate.data.data.items);
//将妖怪列表数据信息，绑定到data数据池
this.monsterList = responseDate.data.data.items;
//可以再次发出ajax请求，和promise一样,例如：
return axios.get("http://localhost:63342/axios/data/response.data.json");
}).then(responseData2 => {
console.log("第二次axios发出ajax请求返回数据responseData2=>", responseData2);
}).catch(err => {
console.log("err=>", err);
})//这里可以再次发出
}
},
created() {//list方法在生命周期函数created()中调用比较好
this.list();
}
})
</script>
</body>
</html>
responseDate.data.data.items的原生数据格式如下：
效果：
3.注意事项和使用细节
将JSON对象转成JSON.stringify(response)，格式输出JSON字符串，可以方便观察分析json字符串结构
例如：
控制台输出：
只需要复制字符串，在一些json转换网站中就可以看到json字符串清晰的结构
day08-Axios的更多相关文章
- 为什么axios请求接口会发起两次请求
之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...
- axios基本用法
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Axios、Lodash、TweenJS
Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...
- axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- vue使用Axios做ajax请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...
- vue2.0设置proxyTable使用axios进行跨域请求
这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...
随机推荐
- Win10已死！微软发布Windows 11大更新：引入ChatGPT、升级巨大
今天凌晨微软在开发者大会上公布了Windows 11的新版本更新"Moment 3",整体升级幅度非常的大. 新系统的多任务有了改进,现在按下Alt+Tab时,可以显示更多的Edg ...
- Cpu是如何选择线程的?
Cpu是如何选择线程的? linux中线程存放格式 linux中线程与进程对应的结构体都是task_struct 唯一不同的点在于线程存放的东西少了点(由于一个进程中的线程们是共享一定数据的那些东西就 ...
- electron、nodejs、typescript、idea 组合开发，安装和配置 以及错误 等 详细说明
1. 创建项目,创建时 选择 nodejs 项目,因为 开发 electron 与 开发 nodejs 基本一致. 2.安装 electron npm i -D electron@beta 看目录 ...
- 《ASP.NET Core 微服务实战》-- 读书笔记（第1章 、第2章）
译者序 微服务设计方法清晰定义了各个开发团队的业务边界,微服务框架以不同方式实现了服务之间的协作与集成. .NET Core 作为全新的 .NET 技术,它不仅完全开源.跨平台,更面向云原生开发进行了 ...
- UVA12024 Hats 题解
题目传送门 前置知识 错位排列 题意 有 \(t\) 组询问,每次询问给定一个 \(n\),表示有 \(n\) 个人,每人各有一个属于自己的帽子,求所有人都带错帽子的概率(不要求约分至最简形式). 解 ...
- NC19782 Tree
题目链接 题目 题目描述 修修去年种下了一棵树,现在它已经有n个结点了. 修修非常擅长数数,他很快就数出了包含每个点的连通点集的数量. 澜澜也想知道答案,但他不会数数,于是他把问题交给了你. 输入描述 ...
- NC16742 [NOIP2002]字串变换
题目链接 题目 题目描述 已知有两个字串 A, B及一组字串变换的规则(至多6个规则): A1 -> B1 A2 -> B2 规则的含义为:在A中的子串 A1可以变换为 B1.A2可以变换 ...
- Centos中安装deb报错
centos7中安装deb包 概要:deb包和rpm包区别:deb后缀的软件包是for Debian系的(包括Ubuntu),不是给centos安装的:rpm后缀的软件包才是for Redhat系 ...
- Centos7的KVM安装配置详解
KVM和虚拟化 虚拟化有几种类型: 完全虚拟化(Full virtualization), 虚机使用原始版本的操作系统, 直接与CPU通信, 是速度最快的虚拟化. 半虚拟化(Paravirtualiz ...
- 【Android逆向】破解看雪test3.apk方案一
1. test3.apk 安装到手机 2. 发现其实际逻辑和之前的test2.apk基本一致,逆向so查看到加入了一些检查逻辑 代码: jstring __fastcall fuck(JNIEnv * ...