Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）

一、Axios

1、定义：利用ES6提供的Promise方式，把AJAX进行了封装。我们在Vue中发送网络请求，基本上就是使用Axios

需要安装第三方的Axios模块，才能使用

2、安装Axios模块

安装Axios模块：npm i axios vue-axios

3、配置项目中的Axios

（1）在项目的src文件夹中创建utils文件夹；

（2）在utils文件中创建axios.js文件；

（3）将下方代码复制/粘贴到axios.js文件中
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'//use：将第三方模块 注入到Vue实例对象中的方法
Vue.use(VueAxios, axios)
（4）必须在main.js中引入当前文件，才能触发此文件中的代码
import './utils/axios'
配置好之后，就能够在Vue上面找到axios这个属性了。

4、案例：试着发送一个GET请求，并将数据渲染到页面上

<template><div><button @click="getData">点我发送请求</button><!-- 虚拟标签：template 本身真实的html标签，仅仅是虚拟包围 --><template v-if="data"><!-- 请求完成前，data值是null，null.code会报错 --><div>{{ data.code }}</div><div>{{ data.message }}</div><div v-for="(item, index) in data.result" :key="index"><img :src="item.image" alt="" /><div>{{ item.title }}</div><div>{{ item.passtime }}</div></div></template></div>
</template>
<script>
export default {data() {return {data: null, // 属性data用于存储请求返回来的数据，默认值null};},methods: {getData() {const url = "https://api.apiopen.top/getWangYiNews";// 在axios中，使用promise语法代替回调函数this.axios.get(url)// 成功后执行.then((result) => {//result 就是请求的结果console.log(result);// 把请求返回的数据存储到本地的data上this.data = result.data;})// 错误处理.catch((err) => {});},},
};
</script>

注意事项：

（1）由于在axios中，使用promise语法代替回调函数，所以.then返回请求成功的结果，.catch进行错误处理；

（2）请求成功后，一定要记得在data中，声明一个变量，来接收请求返回的数据=> this.data=result.data;

（3）渲染数据的时候，由于在我们在请求完成前，案例中data的值是null，null.code就会报错，所以需要在父元素中使用 v-if 进行判断，当data中拿到了请求回来的数据，再进行页面的渲染。这里我是使用template虚拟标签进行虚拟包围，这样不会影响页面结构。

（4）在渲染图片时，要注意两点：

①src前面要加：，将它变成一个动态属性；

②加了：之后，src中的变量就不用加 {{}} 了。

持续更新中。。。

Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）相关推荐

VUE中a标签里调用v-on:click发送axios请求
主要用于实现下载.导出功能.后端传递流,而不是blob对象. <a>标签的href不为false,且绑定的click向后台发送axios请求实现. 这里使用@click不启作用. 调用顺序 ...
[vue] 实际工作中，你总结的vue最佳实践有哪些？
[vue] 实际工作中,你总结的vue最佳实践有哪些? .babelrc 是目前 babel-polyfill 的最佳实践 { "presets": [ [ "@babe ...
$.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)
一.概述 1.1 发展历程在开始之前先来看一下Ajax的工作原理吧,如下图所示: Ajax全称Asynchronous javascript and xml(异步 JavaScript 和 XML) ...
python同时同步发送多个请求_python如何实现“发送一个请求，等待多个响应”的同步？...
我正在写一些代码通过串行口与单片机通信. MCU端基本上是一个请求/响应服务器. 一个或多个MCU发送我的请求. 然而,响应可以异步到达并且具有随机延迟,但是响应的顺序将保持不变. 另外,我的应用程序 ...
微信小程序只能发起https请求吗,能不能发送http请求
如题,小程序在线上的版本都是需要使用https的请求,同时只能请求到自己在微信公众号中配置好的https服务器不过在开发环境中,在电脑上的微信web开具中的详情底下的不进行https校验打上勾即 ...
curl post请求表单_CURL 发送POST请求
CURL 发送POST请求 curl -H "Content-Type: application/json" -X POST -d '{"user_id": & ...
php发请求的方法,php发送http请求的几种方法
有很多时候,我们还是需要用php去发送http请求的,它可以模拟浏览器的行为,通常它的应用场景有:1.后端测试自己的接口.2.后端请求别人的数据. 后端测试自己的接口,比如我们写了一个返回json数据 ...
java请求servlet,[Java]Servlet发送Post请求
演示实例:AServlet发送一个Student对象到BServlet #### 1.AServlet部分首先造一个学生stu,然后通过fastjson的`toJSONString`方法把对象转换成 ...

Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）

一、Axios

Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）相关推荐

最新文章

热门文章