【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 文件,然后使用一个 在线工具 转 ...
随机推荐
- Spring(一):Spring概述及相关概念
Spring简介 Spring主要作用是用来解耦,降低代码之间的耦合度.根据功能的不同,可以将系统的代码分为主业务逻辑与系统服务逻辑. 主业务逻辑之间代码联系紧密,相互调用较多,复用性相对较低: 系统 ...
- 精通模块化JavaScript
近日读了一本名为<精通模块化JavaScript>的书,并记录了其中的精髓. 一.模块化思维 精通模块化开发并不是指要遵循一套定义明确的规则,而是指能够将自己置身于使用者的角度,为可能即将 ...
- 【ZeyFraのJavaEE开发小知识05】Mybatis-Plus & Axios
关于如何在Mybatis-Plus中添加SQL拦截器 之前ZeyFra在MyBatis-Plus[踩坑记录01]一文中提到过,使用Mybatis-Plus时最好使用MybatisSqlSessionF ...
- Git本地仓库基本操作-1
code[class*="language-"], pre[class*="language-"] { color: rgba(51, 51, 51, 1); ...
- Java系列教程-SpringMVC教程
SpringMVC教程 1.SpringMVC概述 1.回顾MVC 1.什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范. 是将业务 ...
- Airtest简单上手讲解
Airtest是网易开发的手机UI界面自动化测试工具,它原本的目的是通过所见即所得,截图点击等等功能,简化手机App图形界面测试代码编写工作. 安装和使用 由于本文的目的是介绍如何使用Airtest来 ...
- 微信小程序实现搜索关键词高亮
目录 1,前言 2,思路 3,代码逻辑 1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...
- DAOS 分布式异步对象存储｜故障模型
DAOS 依靠大规模分布式单端口存储.因此,每个 Target 实际上都是一个单独的失败点. DAOS 通过在不同的容错域中提供 Target 间的冗余来实现数据和元数据的可用性和持久性.DAOS 内 ...
- 第一次OOP作业-Blog总结
前言 第一次作业一共八道题,此次作业也是这三次作业中最接近面向过程程序设计的题目集,整体难度偏低,总耗时1.5h,主要的知识点在熟悉Java的语法上,整体题目的逻辑非常清晰简单,但最后一个判断三角形类 ...
- Redis持久化——内存快照(RDB)
最新:Redis持久化--如何选择合适的持久化方式 最新:Redis持久化--AOF日志 最新:Redis持久化--内存快照(RDB) 一文回顾Redis五大对象(数据类型) Redis对象--有序集 ...