【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 文件,然后使用一个 在线工具 转 ...
随机推荐
- [LeetCode 279.] Perfect Squres
LeetCode 279. Perfect Squres DP 是笨办法中的高效办法,又是一道可以被好办法打败的 DP 题. 题目描述 Given a positive integer n, find ...
- Python基础（2）——循环和分支[xiaoshun]
一.瞎扯 世界上一切的系统都可以被'分支'表示.循环也是分支,只不过又重复之前的'分支'选择罢了.程序如人生,每一次的'分支',每一次的选择,都会有不同的结果: 有的选择止步不前,无限循环: 有的选择 ...
- solr简明教程
文章目录 安装 启动 创建core 配置core索引MySQL数据 3.2.1 3.2.2 3.2.3 测试定时更新 五.配置中文分词 SolrJ 操作索引的增.删.查 七.通过SolrJ对MySQL ...
- 高精地图技术专栏 | 基于空间连续性的异常3D点云修复技术
1.背景 1.1 高精资料采集 高精采集车是集成了测绘激光.高性能惯导.高分辨率相机等传感器为一体的移动测绘系统.高德高精团队经过多年深耕打造的采集车,具有精度高.速度快.数据产生周期短.自动化程度高 ...
- JPEG解码——(6)IDCT逆离散余弦变换
本篇是该系列的第六篇,承接上篇IZigZag变换,介绍接下来的一个步骤--逆离散余弦变换,即逆零偏置前的一个步骤. 该步骤比较偏理论,其业务是对IZigZag变换后的数据,再进一步的处理,使其恢复DC ...
- UML和设计模式原则总结
UML总结: uml就是统一建模语言,包括语义概念 标记符号和指南 具有静态 动态 环境上的和组织性的部分 .它不是编程语言.uml预览它涉及的主要领域有结构性(静态视图,用例视图,构件图,实现视图, ...
- 灵魂拷问！浏览器输入「xxxxhub」的背后.....
Hey guys 各位读者姥爷们大家好,这里是程序员 cxuan 计算机网络连载系列的第 13 篇文章. 到现在为止,我们算是把应用层.运输层.网络层和数据链路层都介绍完了,那么现在是时候把这些内容都 ...
- MySQL数据库与python交互
1.安装引入模块 安装mysql模块 pip install PyMySQL; 文件中引入模块 import pymysql 2.认识Connection对象 用于建立与数据库的连接 创建对象:调用c ...
- 运维干货｜交换机不同VLAN之间及相同VLAN之内进行隔离
文中所展示的内容为VLAN与VLAN之间分隔关系,如相同VLAN用户之间进行分隔,相同VLAN一组用户之间允许通信并与其它一组用户之间进行分隔,属于VLAN的高级应用范畴.本文来源于智象运维某大神的日 ...
- 「HTML+CSS」--自定义加载动画【008】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...