Vue发送请求

Posted 江山一族

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue发送请求相关的知识,希望对你有一定的参考价值。

可以试试玩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 (acctperms{
    // Both requests are now complete
  }));

 

以上是关于Vue发送请求的主要内容,如果未能解决你的问题,请参考以下文章

使用 vue-resource 发送跨域请求

Vue--axios:vue中的ajax异步请求(发送和请求数据)vue-resource异步请求和跨域

Vue--axios:vue中的ajax异步请求(发送和请求数据)

vue3在加载页面时发送请求

Vue发送请求

Vue get发送请求中文乱码问题