node.js vue-axios和vue-resource
阿新 • • 發佈：2018-11-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resource</title>
<script src="../../node_modules/"></script>
<script src="../../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
<h2>vue-resource演示</h2>
<a href="#" @click="sendGet">傳送Get請求</a>
<a href="#" @click="sendPost">傳送Post請求</a>
<a href="#" @click="sendJsonp">傳送Jsonp請求</a>
<a href="#" @click="send">全域性函式</a>
<p v-text="response"></p>
</div>
<script>
new Vue({
el:"#app",
data:{
response:'',
msg:''
},
methods:{
sendGet: function () {
var _this = this;
//http://www.imooc.com/course/ajaxskillcourse?cid=796
this.$http.get("/login",{
params:{
userId:"123"
},
headers:{
access_token:"abcded"
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}, function (error) {
console.log("error:"+error);
_this.response = error;
});
},
sendPost: function () {
var _this = this;
var params = {
username:"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../node_modules/requirejs/require.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/axios/dist/axios.js"></script>
<script src="../../node_modules/jsonp/index.js"></script>
</head>
<body>
<div id="app">
<h2>axios演示</h2>
<a href="#" @click="sendGet">傳送Get請求</a>
<a href="#" @click="sendPost">傳送Post請求</a>
<a href="#" @click="sendJsonp">傳送Jsonp請求</a>
<a href="#" @click="send">全域性函式</a>
<p v-text="response"></p>
</div>
<script>
// Vue.use(axios);
Vue.prototype.$http = axios;
new Vue({
el:"#app",
data:{
response:''
},
methods:{
sendGet: function () {
var _this = this;
//
axios.get("/login",{
params:{
userId:"123"
},
headers:{
access_token:"abcded"
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}).catch(function (err) {
console.log("error:"+err);
});
},
sendPost: function () {
var _this = this;
var params = {
username:"
ES6的一些語法：
<script>
function sum(x,y,z){
let total=0;
if(x) total+=x;
if(y) total+=y;
if(z) total+=z;
console.log(`total:${total}`)
}
sum(4,"",9);
function sum2(...m) {
let total = 0;
for (var i of m) {
total+=i;
}
console.log(`total:${total}`)
}
sum2(4,8,9,10);
let sum3=(...m)=>{
let total = 0;
for (var i of m) {
total+=i;
}
console.log(`total:${total}`)
}
sum3(4,8,9,10);
var [x,y]=[4,8]
console.log(...[4,8]);
let arr1=[1,3]; let arr2=[4,8];
console.log("concat",arr1.concat(arr2));
// [...arr1,...arr2]
// var [x,y]=[4,8];
var [x,...y]=[4,8,10,30]
let [a,b,c]="ES6";
let xy=["...ES6"];
</script>
Promise的用法：
let checkLogin=function () {
return new Promise(function (resolve,reject){
let flag=document.cookie.indexOf("userId")>-1?true:false;
if(flag=true){
resolve({
status:0,
result:true
})
}else {
reject("error");
}
})
};
let getUserInfo=()=>{
return new Promise((resolve,reject)=>{
let userInfo={
userId:"101"
}
resolve(userInfo);
});
}
checkLogin().then((res)=>{
if(res.status==0)
{
console.log("login success");
return getUserInfo();
}
}).catch((error)=>{
console.log(`error:${error}`);
}).then((res2)=>{
console.log(`userId:${res2.userId}`)
});
Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
console.log(`result1:${res1.result},result2:${res2.userId}`)
})