3-2 axios基础介绍
1.静态引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.npm方式安装(推荐)
$ npm install axios --save
-save ==> 是指将包信息添加到 package.json 里的 dependencies节点,表示发布时依赖的包。
-save-dev ==> 是指将包信息添加到 package.json 里的 devDependencies节点,表示开发时依赖的包。
调用
import axios from 'axios';
3.八种API (详细介绍 : https://www.npmjs.com/package/axios
1.axios.request(config)
2.axios.get(url[, config])
3.axios.delete(url[, config])
4.axios.head(url[, config])
5.axios.options(url[, config])
6.axios.post(url[, data[, config]])
7.axios.put(url[, data[, config]])
8.axios.patch(url[, data[, config]])
4.接收响应信息
axios.get('/user/12345').then(function(response) {
console.log(response.data); // 响应数据
console.log(response.status); // 状态码
console.log(response.statusText); // 服务器的响应的HTTP状态信息
console.log(response.headers); // 响应头
console.log(response.config); // 提供给`axios`该请求的配置
});
5.多个接口一起调用
function getUserAccount() {
return axios.get('/user/12345');
} function getUserPermissions() {
return axios.get('/user/12345/permissions');
} axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
二.常见的请求
new Vue({
// 全局拦截
mounted: function(){
// 请求前
axios.interceptors.request.use(config => {
console.log("request 请求前");
return config;
}) // 拦截响应的请求
axios.interceptors.response.use(response => {
console.log("request 响应的请求前")
return response;
})
},
methods: {
// get请求
get: function(){
axios.get("package.json", {
params: {
userId: "999"
},
headers: {
token: "Alan"
}
}).then(res => {
this.msg = res.data;
}).catch(error => { // catch是捕获异常
this.msg = "error" + error;
})
},
// post请求
post: function(){
axios.post("package.json", {
// 参数
userId: "888"
},{
headers: {
token: "Alanpost"
}
}).then(res => {
this.msg = res.data;
}).catch(error => { // catch是捕获异常
this.msg = "error" + error;
})
}, // axios底层配置
http: function(){
axios({
url:"package.json",
method: "get",
// post参数
data: {
urseId: "101"
},
// get参数
params: {
userId: "102",
},
headers: {
token: "http"
}
}).then(res => {
this.msg = res.data;
})
}
}
})
3-2 axios基础介绍的更多相关文章
- axios基础介绍
axios基础介绍 get请求要在params中定义,post要在data中定义.
- 学习axios必知必会(1)~axios基本介绍、axios配置、json-server接口模拟工具
一.axios基本介绍 1.axios(前端最流行的 ajax 请求库) 特点: ① 基于 xhr + promise 的异步 ajax 请求库 ② 浏览器端/node 端都可以使用 ③ 支持请求/响 ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
- C++ 迭代器 基础介绍
C++ 迭代器 基础介绍 迭代器提供对一个容器中的对象的访问方法,并且定义了容器中对象的范围.迭代器就如同一个指针.事实上,C++的指针也是一种迭代器.但是,迭代器不仅仅是指针,因此你不能认为他们一定 ...
- Node.js学习笔记(一)基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- Node.js 基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- 1、git基础介绍及远程/本地仓库、分支
1. Git基础介绍 基于Git进行开发时,首先需要将远程仓库代码clone到本地,即为本地仓库.后续大部分时间都是基于本地仓库上的分支进行编码,最后将本地仓库的代码合入远程仓库. 1.1. 远程仓库 ...
- git基础介绍
git基础介绍 这是git操作的基础篇,是以前的写的操作文档,就没有进行手打,直接把图片贴进来了,你们担待哈,有不正确的地方可以指正出来,我将在第一时间去修改,多谢哈! 一.文件状态:git系统的文件 ...
- OSPF基础介绍
OSPF基础介绍 一.RIP的缺陷 1.以跳数评估的路由并非最优路径 2.最大跳数16导致网络尺度小 3.收敛速度慢 4.更新发送全部路由表浪费网络资源 二.OSPF基本原理 1.什么是OSPF a& ...
随机推荐
- Java排序算法——堆排序
堆排序 package sort; public class Heap_Sort { public static void main(String[] args) { // TODO 自动生成的方法存 ...
- kafka学习之-java api测试
1.配置 package com.storm.storm_my.kafka; /** * * @author Peng.Li * */ public class KafkaConfigApiConst ...
- libstdc++.so.5: undefined reference to `memcpy@GLIBC_2.14'
没有别的原因: 找正确的 libstdc++.so.5 包就成. 我这儿有,需要的可以下载奥!
- Webkit内核探究【1】——Webkit简介
出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660355.html作者:李嘉昱 研究Webkit内核已经有一段时间了,在这期间我花了很多时间去 ...
- js压缩上传图片base64长度
im发送图片,现将图片压缩再上传 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. ...
- [原]单片机/Stm32教程
1 http://www.amobbs.com/forum.php?mod=viewthread&tid=4462962 2.http://bbs.21ic.com/forum.php?mod ...
- SQLServer2008/2005 生成数据字典语句
SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.n ...
- 8 -- 深入使用Spring -- 3...1 Resource实现类
8.3.1 Resource实现类 Resource接口是Spring资源访问的接口,具体的资源访问由该接口的实现类完成. Spring提供的Resource接口的实现类: ⊙ UrlResource ...
- Window关闭端口的方法(445/135/137/138/139/3389等)
为防止漏洞被利用,需要采取必要措施,关闭以上端口,以保证系统更加安全. window2003 关闭135端口的方法 要关闭此端口,只需停止DCOM接口服务即达到目的.下面是详细操作过程. 1.打开“组 ...
- PHP 使用 MongoDB
PHP 想要往 MongoDB 里增删查改数据,需要先安装 mongodb 或 mongo 扩展模块,一般两个都装上: cd /usr/local/src/ wget https://pecl.php ...