码迷,mamicode.com
首页 > 移动开发 > 详细

axios 讲解 和vue搭建使用

时间:2017-09-12 13:36:40      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:for   cep   pre   otc   function   this   一个   use   name   

<!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搭建使用

标签:for   cep   pre   otc   function   this   一个   use   name   

原文地址:http://www.cnblogs.com/alone2015/p/7509333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!