axios使用
程序员文章站
2022-07-02 21:20:42
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<h1>axios插件讲解</h1>
<a href="javascript:;" class="btn btn-primary" @click="get">Get请求</a>
<a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
<a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>
<div>
<span>{{ msg }}</span>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: ""
},
mounted () {
},
methods: {
// 不传参
// get () {
// axios.get("package.json").then( res => {
// this.msg = res.data;
// })
// },
// 传参
get () {
axios.get("package.json", {
params: {
userId: "999"
},
headers: {
token: "jack"
}
}).then( res => {
this.msg = res.data;
}).catch( error => {
console.log("error init." + error)
});
},
post () {
axios.post("package.json", {
userId: "888"
}, {
headers: {
token: "tom"
}
}).then( res => {
this.msg = res.data;
}).catch( error => {
console.log("error init." + error);
})
},
/* post请求要在data中定义,get请求要在params中定义
post请求发送的是request body,
get请求是通过params传递数据
http () {
axios({
url: "package.json",
method: "post",
data: {
userId: "101"
},
headers: {
token: "http-test"
}
}).then( res => {
this.msg = res.data;
})
},*/
http () {
axios({
url: "package.json",
method: "get",
params: {
userId: "102"
},
headers: {
token: "http-test"
}
}).then( res => {
this.msg = res.data;
})
}
}
})
</script>
</body>
</html>
请求、响应拦截
axios demo示例(二)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="vue.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<h1>axios插件讲解</h1>
<a href="javascript:;" class="btn btn-primary" @click="get">Get请求</a>
<a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
<a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>
<div>
<span>{{ msg }}</span>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: ""
},
mounted () {
// 全局的拦截——request请求
axios.interceptors.request.use( (config) => {
console.log("request init.");
// 相关业务代码...
return config;
});
// 全局的拦截——response请求
axios.interceptors.response.use( (response) => {
console.log("response init.");
return response;
});
},
methods: {
// 不传参
// get () {
// axios.get("package.json").then( res => {
// this.msg = res.data;
// })
// },
// 传参
get () {
axios.get("package.json", {
params: {
userId: "999"
},
headers: {
token: "jack"
}
}).then( res => {
this.msg = res.data;
}).catch( error => {
console.log("error init." + error)
});
},
post () {
axios.post("package.json", {
userId: "888"
}, {
headers: {
token: "tom"
}
}).then( res => {
this.msg = res.data;
}).catch( error => {
console.log("error init." + error);
})
},
/* http () {
axios({
url: "package.json",
method: "post",
data: {
userId: "101"
},
headers: {
token: "http-test"
}
}).then( res => {
this.msg = res.data;
})
},*/
http () {
axios({
url: "package.json",
method: "get",
params: {
userId: "102"
},
headers: {
token: "http-test"
}
}).then( res => {
this.msg = res.data;
})
}
}
})
</script>
</body>
</html>
下一篇: axios使用