1. 程式人生 > >Vue發送請求

Vue發送請求

ams ini 使用 let 個人 .com () sla RR

可以試試玩ajax請求,個人覺得axios用Promise包裝了下,代碼美觀

axios請求使用方法; https://www.npmjs.com/package/axios-es6

1.npm install axios -save,

mian.js中引入

import Axios from ‘axios‘

Vue.prototype.$axios = Axios

2.發送請求,遍歷數據

<template>
<div>
<ul>
<li v-for="data in newsData">
<p>{{data.title}}</p>
<img :src="data.img

"/>
<p>{{data.content}}</p>
</li>
</ul>
</div>
</template>

<script>
export default {
name: ‘httpData‘,
data() {
return {
newsData:[]
}
},
created() {
const ulr2 = ‘http://www.wwtliu.com/sxtstu/news/juhenews.php‘
const ulr = ‘http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php‘
let param

= {
type:‘junshi‘,
count:30
}
this.$axios(ulr,{params:param}).then(res => {
console.log(res.data.banner)
this.newsData = res.data.banner
}).catch(err => {
console.time(err)
})
}
}
</script>

<style>

</style>

post請求 摘自官網

axios.post(‘/user, { firstName: ‘Fred,
lastName: ‘Flintstone }) .then(function (response) { console.log(response); }) .catch(function (response) { console.log(response); });

A. Performing multiple concurrent requests

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 }));

Vue發送請求