3-2 axios基础介绍
2024-10-17 05:04:50
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;
})
}
}
})
最新文章
- BZOJ2400: Spoj 839 Optimal Marks
- create file遇到操作系统错误5拒绝访问
- Unix Pipes to Javascript Pipes
- fzuoj Problem 2182 水题
- Oracle内置函数内容整理
- 50道经典的JAVA编程题(31-35)
- String的那点小事儿
- repo sync 时的自动续接脚本[转]
- LeetCode: Best Time to Buy and Sell Stock III [123]
- GitHub上受欢迎的Android UI Library
- jQuery-4.动画篇---自定义动画
- Flask 系列之 Pagination
- mybatis 中 foreach collection的三种用法（转）
- Python打包之pyinstaller
- Java ThreadLocal的使用
- sklearn算法库的顶层设计
- 安装ionice v2版本（官方帮助文档）
- @class CLASS ;必须加分号，且卸载@interface之前
- vcf-tools 笔记
- Alpha-5