axios 讲解 和vue搭建使用

Posted 记录下自己走过前端的坑~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了axios 讲解 和vue搭建使用相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head>

<body>
<div id="app">
<h2>{{title}}</h2>
<a href="javascript:void(0);" @click="get">get请求</a>
<a href="javascript:void(0);" @click="post">post请求</a>
<a href="javascript:void(0);" @click="http">http请求</a>
<p>{{msg}}</p>
</div>


<script>
new Vue({
el: "#app",
data: {
msg: "",
title: "axios讲解"
},
mounted: function() {
axios.interceptors.request.use(function(config) {
console.log("request");
return config;
})
axios.interceptors.response.use(function(response) {
console.log("reques11t");
return response;
})
},
methods: {
get: function() {
axios.get("package.json", {
params: {
userId: "999",
page: 5
},
headers: {
toKen: ‘jack‘,
sb: ‘aaa‘
},
before: function() {
console.log("before aaa");
}
}).then(res => {
this.msg = res.data;
}).catch(function(error) {
console.log("error init" + error)
})
},
post: function() {
axios.post("package.1.json", {
userId: 888
}, {
headers: {
toKen: "tom"
}
}).then(res => {
this.msg = res.data
})
},
http: function() {
axios({
url: "package.json",
method: "get",
data: {
userId: 11
},
params: {
userId: "999",
page: 5
},
headers: {
toKen: ‘http-test‘
}
}).then(res => {
this.msg = res.data
})
}
}
})
</script>
</body>

</html>

package.json 

{
    "result": [
        ["卫衣女", "4716267"],
        ["卫衣2017新款女", "26439903"],
        ["卫衣男", "11965219"],
        ["卫衣女韩版潮学生 宽松 bf ulzzang", "1646428"],
        ["卫衣女秋", "17412913"],
        ["卫衣女 宽松", "1809463"],
        ["卫衣oversize", "1717961"],
        ["卫衣女连帽", "23678431"],
        ["卫衣男连帽", "6375964"],
        ["卫衣女薄款", "2550625"]
    ]
}

需要开静态服务器比如用f2e-server 或express || koa || tomcat || nginx || apache 挑一个吧。

我喜欢用f2e-server  






以上是关于axios 讲解 和vue搭建使用的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

vue实例讲解之axios的使用

ajax与 axios的基础讲解(附代码及接口)

基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战

vue搭建项目之设置axios