【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 文件,然后使用一个 在线工具 转 ...
随机推荐
- Python3中变量作用域nonlocal的总结
最近,在工作中踩到了一个关于Python3中nonlocal语句指定的变量作用域的坑.今天趁周六休息总结记录一下. 众所周知,Python中最常见的作用域定义如下: 但是,为了更加方便地在闭包函数 ...
- ES6学习笔记（2）- 箭头函数
1. 箭头函数声明 箭头函数的声明方式示例: 1 const printValue = (condition) => { 2 let testValue = 55; 3 if (conditio ...
- Nuxt.js vue服务端渲染
一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...
- P1540_机器(JAVA语言)
题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...
- SpringCloud（六）分布式事务
在分布式系统中,分布式事务基本上是绕不开的, 分布式事务是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上 .其实就可以简单理解成在分布式系统中实现事务 ...
- rancher的ssl部署
前言 因为我司有多套k8s环境,管理起来过于麻烦,需要一个统一的管理平台,又因为没有预留时间自己开发,经过选择后,使用rancher来进行多k8s环境的统一管理平台. 部署 1.在阿里云上申请免费的证 ...
- 201871030102_崔红梅 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
项目 内容 课程班级博客链接 班级博客 这个作业要求链接 作业要求 我的课程学习目标 1.体验软件项目开发中的两人合作,练习结对编程2. 掌握Github协作开发程序的操作方法.3.阅读<现代软 ...
- 北航OO第一单元作业总结（1.1~1.3）
经过了三次作业之后,OO第一单元告一段落,作为一个蒟蒻,我初步了解了面向对象的编程思想,并将所学内容用于实践. 一.第一次作业 1.架构分析 本次作业需要完成的任务为简单多项式导函数的求解.表达式仅支 ...
- 机器学习--PR曲线， ROC曲线
在机器学习领域,如果把Accuracy作为衡量模型性能好坏的唯一指标,可能会使我们对模型性能产生误解,尤其是当我们模型输出值是一个概率值时,更不适宜只采取Accuracy作为衡量模型性泛化能的指标．这 ...
- Spring Boot demo系列（八）：Swagger
2021.2.24 更新 1 概述 Swagger主要用于生成API文档,本文演示了如何使用目前最新的OpenAPI3以及Swagger来进行接口文档的生成. 2 依赖 <dependency& ...