【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 文件,然后使用一个 在线工具 转 ...
随机推荐
- css3中的渐变效果
大家好,这里是demo软件园,今天为大家分享的是css3中的渐变效果. css3中的渐变需要注意的是渐变的是图片而不是颜色,而渐变又分为两种:线性渐变与径向渐变,今天我们重点介绍的是线性渐变. 1.线 ...
- P3387 【模板】缩点 题解 （Tarjan）
题目链接 P3387 [模板]缩点 解题思路 这几天搞图论,好有趣hhh,多写几篇博客. 上次学\(Tarjan\)求割点,这次缩点. 思路大概是多一个栈和染色的步骤,每次\(Tarjan\)的时候把 ...
- java实现一个点餐系统
转载于blog.csdn.net/weixin_44219955 项目大体框架 菜品类(菜品id,菜品名,菜品类型,上架时间,单价,月销售,总数量) 管理员类(管理员id,账号,密码) 客户类(客户i ...
- Python中if __name__ = "__main__"的理解
通俗的理解__name__ ="__main__"的意思就是:当.py文件被直接运行时,if __name__ = "__main__"之下的代码快将被运行:当 ...
- Bug调试专项训练四笔记
Ajax案例一 导入项目直接运行出现联想无反应 错误原因: 错误1: 55行找不到方法: 错误1解决方案: 解决错误1点击仍无反应 错误2:通过浏览器得出错误2:58行找不到方法 错误2解决方案: 解 ...
- 力扣 - 剑指 Offer 09. 用两个栈实现队列
目录 题目 思路 代码 复杂度分析 题目 剑指 Offer 09. 用两个栈实现队列 思路 刚开始想的是用stack1作为数据存储的地方,stack2用来作为辅助栈,如果添加元素直接push入stac ...
- spring-cloud-oauth2 认证授权
什么是OAuth2? OAuth2是一个关于授权的开放标准,核心思路是通过各类认证手段(具体什么手段OAuth2不关心)认证用户身份,并颁发token(令牌),使得第三方应用可以使用该令牌在限定时间. ...
- Anacoda下报错conda command not found 以及TypeError: __new__() got an unexpected keyword argument 'serialized_options'
在anacoda安装完成后,执行conda list命令,显示command not found 解决方法: 对于anaconda 2 , 输入export PATH=~/anaconda2/bin ...
- Java后端进阶-网络编程（Netty责任链Pipeline）
设计模式-责任链模式 一个责任链模拟demo package com.study.hc.net.netty.demo; // -----链表形式调用------netty就是类似的这种形式 publi ...
- prometheus入门介绍及相关组件、原理讲解
1:介绍 Prometheus 是由 SoundCloud 开源监控告警解决方案. prometheus是由谷歌研发的一款开源的监控软件,目前已经被云计算本地基金会托管,是继k8s托管的第二个项目. ...