Axios
Axio se basa en la promesa de una librería HTTP, puede utilizar el navegador y Node.js en.
Características
. 1, creados a partir del navegador con XMLHttpRequests
2, solicitud de http creado a partir de Node.js
. 3, el API es compatible con la promesa
. 4, y en respuesta a la solicitud de interceptación
5, los datos de solicitud de conversión y respuesta de datos
6, solicitud de cancelación
7, los datos se convierten automáticamente JSON
8, el cliente extremo de soporte defensa XSRF
La introducción de paquete de Axios
usando NPM:
$ NPM la instalación Axios
Uso Bower:
$ Bower instalar Axios
Uso cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
aplicación axios.get
//为get类的button添加点击事件,事件作用为获取特定url的信息
document.querySelector(".get").onclick = function () {//回调函数
axios.get("https://autumnfish.cn/api/joke/list?num=3")//url
.then(function (response) {
console.log(response)//获取成功执行的操作
}, function (err) {
console.log(err)//获取失败执行的操作
}
)
}
aplicación axios.post
//为post类的button添加点击事件,将post中字典的信息上传服务器
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg", { username: "FJf" })
//url, 上传信息字典
.then(function (response) {
console.log(response)
}, function (err) {
console.log(err)
})
}
axios utilizan con vue
Dios sabe
Definen en el js archivo de ejemplo vue, datos en tiempo real a ser prestados por el vue dom, en el ejemplo vue, vamos a obtener datos de los datos del servidor y devuelve desde el servidor a seguir nuestro ejemplo, el código de abajo:
var app = new Vue({
el: "#app",
data: {
city: "",//用于存储输入栏的城市信息 v-model
weatherList: []//用于存储服务器返回的天气数组
},
methods: {
searchWeather: function () {
//保存this
var that = this
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(//"。。。?city="+ this.city 增加返回的条件
function (response) {
console.log(response.data.data.forecast)//获取response中对应的天气数组
that.weatherList = response.data.data.forecast//返回天气数组到weatherlist中
}
).catch(function (err) { })
}
}
})
Después de recibir los datos, tenemos que lograr que los datos en tiempo real para ir dom, para los que el uso de V-bucle para crear li, usando expresiones de interpolación interpolación. El código del núcleo es como sigue:
</div>
<ul class="weather_list">
<li v-for="items in weatherList">
<div class="info_type"><span class="iconfont">{{ items.type }}</span></div>
<div class="info_temp">
<b>{{ items.low }}</b>
~
<b>{{ items.high }}</b>
</div>
<div class="info_date"><span>{{ items.date }}</span></div>
</li>
</ul>
</div>
Dios sabe - clic en la consulta
el cambio vue de datos porque la información es la respuesta en tiempo real, sólo tenemos que vue ejemplo, puede responder a la dom, durante el uso de la función Enter cuando la consulta para obtener datos desde el servidor que se ha completado.
vista
getCity: function (city) {
this.city = city//根据点击事件调整city的值
this.searchWeather()//根据city的值获取服务器数据并同步渲染
}
html
<div class="hotkey">
<a href="javascript:;" @click="getCity('开平')">开平</a> <!-- 使用自义定getCity函数更改city的值 -->
<a href="javascript:;" @click="getCity('佛山')">佛山</a>
<a href="javascript:;" @click="getCity('广州')">广州</a>
<a href="javascript:;" @click="getCity('深圳')">深圳</a>
</div>
Extracto: https :? //Www.bilibili.com/video/BV12J411m7MG p = 29