【vue-09】axios
【vue-09】axios
为什么要使用axios
功能特点：
支持发送ajax异步
支持在NodeJs中发送ajax请求。
支持Promise
支持拦截器请求和响应
支持对请求和响应数据的转换。
快速上手
安装：npm install axios --save或者使用cdn
data.json和demo1.html在同一个文件夹下
data.json
{
"name": "Java",
"url": "https://www.baidu.com",
"page":1,
"isOK":true,
"address": {
"sheng": "广东",
"shi":"深圳"
},
"links": [
{
"name": "name1",
"url": "url1"
},
{
"name": "name2",
"url": "url2"
}
]
}
demo1.html
v-cloak解决网页刚加载会出现{{info.name}}这种的，让网页是白的- mounted 编译好的HTML挂载到页面完成后执行的事件钩子，这个钩子函数一般会做一些ajax请求获取数据，进行数据初始化
response=>(console.log(this.info=response.data)需要改成ES6，不然会出现表达式异常
- data()方法接受mounted的返回值
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div>{{info.name}}</div>
<div>{{info.address.shi}}</div>
<a v-bind:href="info.url">百度</a>
</div>
</body>
<--引入axios的cdn--></--引入axios的cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data(){
//请求的返回参数要和json字符串一样
return{
info:{
name:null,
address:{
sheng:null,
shi:null
},
url:null
}
}
},
mounted(){
axios.get('data.json').then(response=>(console.log(this.info=response.data)))
}
});
</script>
</html>
Promise回调例子
new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('HelloWorld')
}, 1000)
}).then(data => {
console.log(data)
return Promise.resolve(data + '111')
}).then(data => {
console.log(data)
return Promise.resolve(data + '222')
}).then(data => {
console.log(data)
})
封装axios
在src下面创建一个utils目录，在里面创建一个request.js
import axios from 'axios'
// 创建axios
const service = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 10000
})
// 设置axios请求拦截器
// 拦截器中，可以对请求进行一些统一化的操作
service.interceptors.request.use(
config => {
// 统一设置请求头
config.headers['token'] = '12345'
console.log('config:', config)
return config
},
err => {
return Promise.reject('请求异常！')
}
)
// 设置响应拦截器
service.interceptors.response.use(
response => {
let res = response.data
const code = res.code
if(code === 200) {
return res
}else {
alert('请求失败！')
return Promise.reject('请求异常！')
}
},
err => {
alert('请求失败！')
return Promise.reject('请求异常！')
}
)
// 把service导出
export default service
使用
在src下面创建一个api目录。在api目录下，根据模块去创建对应的js文件，文件中内容如下。
// 引入刚刚封装的request
import request from '@/utils/request'
const group_name = 'department'
// 创建一个对象，用于封装请求api
let data = {
getDepartmentList() {
// 返回一个request
return new request({
url: `/${group_name}/departmentList`,
method: 'get'
})
},
getDepartmentList2() {
// 返回一个request
return new request({
url: `/${group_name}/departmentList`,
method: 'get'
})
},
}
// 导出
export default data
在组件中使用。
import departmentApi from "@/api/department";
getDepartment() {
departmentApi.getDepartmentList().then(res => {
console.log('返回数据：',res);
});
}
【vue-09】axios的更多相关文章
- 【vue知识点】1）vue生命周期
[vue知识点]2)vue登录认证
- 【vue iview】项目 win10 放在C盘 经常npm install不成功，就是因为 权限问题，把代码目录放到D盘就没事了。
[vue iview]项目 win10 放在C盘 经常npm install不成功,就是因为 权限问题,把代码目录放到D盘就没事了.
- 【Vue.js】代码优化：在dom中加一行v-if就可少写一个循环类方法
[问题描述] 把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来. [一般做法](两次循环) 首先取出当前用户的购物车列表,循 ...
- 【26.09%】【codeforces 579C】A Problem about Polyline
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- 【vue入门】日志demo，增删改查的练习（无vuex版本）
安装 1. 确定电脑已装node和npm 出现版本号则说明电脑已经安装好node和npm2. 创建一个基于webpack的项目 3. 在项目里安装依赖 4. 运行 配置路由为了动态渲染各个页面的组 ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- 【Vue.js】基于vue的实时搜索，在结果中高亮显示关键词
一.搜素效果如下: 二.核心 1)利用oninput属性来触发搜素功能 2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span class ...
- 【vue学习】vue中怎么引用laydate.js日期插件
此贴意在解决一个妹子的问题 https://q.cnblogs.com/q/101462 下载js包 http://www.layui.com/laydate/ 将laydate下载的包解压放入sta ...
- 【Vue+Node】解决axois请求数据跨域问题
项目基于Vue前端+Node后台,启动两个服务,请求数据时,端口不一致造成跨域报错: (No 'Access-Control-Allow-Origin' header is present on th ...
- 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用
前言 一直没有找到一个合适的展示个人项目的模板,所以自己动手使用 Vue 写了一个.该模板基于 Markdown 文件进行配置,只需要按一定规则编写 Markdown 文件,然后使用一个 在线工具 转 ...
随机推荐
- FreeBSD pkg基础教程1
pkg 基础教程1装上系统默认没有pkg,先获取pkg:#pkg 回车即可输入y 确认下载------------------------------------pkg使用https,先安装ssl 证 ...
- Mysql将查询结果某个字段以逗号分隔，使用group_concat函数可以实现（配合group by使用）
示例:SELECT Id, GROUP_CONCAT(Name SEPARATOR ',') Names FROM some_table GROUP BY id
- javamelody简单介绍
JavaMelody 能够监测Java或Java EE应用程序服务器,并以图表的方式显示:Java内存和Java CPU使用情况,用户Session数量,JDBC连接数,和http请求.sql请求. ...
- html Ajax连接.NET Ashx
Html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- Hi3516如何连接Wifi（二）
目录: 一.总体思路 二.启动Daemon 三.作者文章合集 书承上回(Hi3516如何连接Wifi(一)),上一篇聊了一下怎样在Hi3516中用wpa_supplicant连接到Wifi热点,本文讲 ...
- 灵雀云Istio技术实践专题整理
Istio技术实践专题(1) Service Mesh Istio 基本概念和架构基础 Istio被称作Kubernetes的最佳云原生拍档.从今天起,我们推出"Istio技术实践" ...
- [树形DP]二叉苹果树
二 叉 苹 果 树 二叉苹果树 二叉苹果树 题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定 ...
- [Fundamental of Power Electronics]-PART I-6.变换器电路-6.2 变换器简单罗列
6.2 变换器简单罗列 变换器的数量可能有无穷种,因此将其全部列出是不可能的.这里给出了一个简单的罗列清单. 首先考虑含单个电感的单输入单输出变换器的类别.可以在电源和负载之间进行连接电感的方法数量是 ...
- 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧
在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法. 而 CSS 发展到今天,其实有很多有意思的仅仅使用 C ...
- 聊聊 OAuth 2.0 的 Token 续期处理
Token 校验逻辑 // CheckTokenEndpoint.checkToken @RequestMapping(value = "/oauth/check_token") ...