作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求:

首先是下载axios的依赖,

npm install --save axios vue-axios

然后在main.js中注册全局使用,

import Vue from 'vue'(基本项目建成就有,查看一下之前是否就有写,有的话可以省略)

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios) (注:这里划重点,不要管引入顺序,这里的use顺序一定不能变!important)

好了,接下来你就可以在你的项目中发送ajax请求了

Ex:

getStars() {

let url = 'https://api.github.com/search/repositories?q=v&sort=stars'

this.axios.get(url)

.then((res) => {

console.log(res)

})

.catch((err) => {

console.log(err)

})

}

这里请求的书写方式有很多种。大家怎么舒服怎么写

Vue.axios.get()

this.axios.get()

this.$http.get()

或者

getStars(){

let url = 'https://api.github.com/search/repositories?q=v&sort=stars'

this.axios({

method: 'get',

url: url

}).then((res) => {

console.log(res)

})

谢谢~

Vue中使用axios发送ajax请求的更多相关文章

  1. vue中使用axios进行ajax请求数据(跨域配置)

    npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...

  2. 在vue中使用axios发送post请求,参数方式

    由于后台接收的参数格式为FormData格式, 在axios中参数格式默认为, 在传参数前,将原先官方提供的格式 改为如下: axios({ url: '../../../room/listRoomP ...

  3. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  4. Axios发送AJAX请求

    目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...

  5. Vue(七)发送Ajax请求

    发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...

  6. js中使用队列发送ajax请求

    最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...

  7. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

  8. 使用axios发送ajax请求

    1.安装 npm install axios 2.在Home.vue中引入 import axios from 'axios' export default {   name: 'Home',   c ...

  9. Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

随机推荐

  1. 自然语言分析工具Hanlp依存文法分析python使用总结(附带依存关系英文简写的中文解释)

    最近在做一个应用依存文法分析来提取文本中各种关系的词语的任务.例如:text=‘新中国在马克思的思想和恩格斯的理论阔步向前’: 我需要提取这个text中的并列的两个关系,从文中分析可知,“马克思的思想 ...

  2. form组件及cookie和session

    多对多关系表的三种创建方式 1.全自动创建 优势:不需要你手动创建第三张表 不足:由于第三张表不是你手动创建的,也就意味着,第三张表字段是固定的无法更改 class Book(models.Model ...

  3. ES6中Map数据结构学习笔记

    很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...

  4. c++背包问题

    又鸽了好久…… 前言 博主刚刚学会背包问题不久,然后有一段时间没练习了 今天就来重新温习一下,顺手就写了这一篇博客. 好了,下面进入正题! 算法简介 背包问题是动态规划的一个分支 主要是分成了01背包 ...

  5. Python2.7错误处理FileNotFoundError报错NameError: name 'FileNotFoundError' is not defined

    错误信息如下: 原因是FileNotFoundError是python3.0中的写法,而Python2.7中应写为IOError.

  6. 编写一个可复用的SpringBoot应用运维脚本

    前提 作为Java开发者,很多场景下会使用SpringBoot开发Web应用,目前微服务主流SpringCloud全家桶也是基于SpringBoot搭建的.SpringBoot应用部署到服务器上,需要 ...

  7. unittest实战(一):用例框架

    import unittest class forTest0(unittest.TestCase): @classmethod def setUpClass(cls) -> None: prin ...

  8. 如何使用@import导入实现了ImportBeanDefinitionRegistrar接口的类?

    如何使用@import导入实现了ImportBeanDefinitionRegistrar接口的类?   在程序开发的时候,我们经常会遇见一个名词“接口”这也是我们做开发人员工作中必不可少的一个技术, ...

  9. 伪元素 before 和 after 初探

    伪元素 before 和 after 初探 使用了 CodePen 做演示,欢迎点击预览 定义 首先来看 MDN 的定义: ::before 创建一个伪元素,作为已选中元素的第一个子元素,常通过 co ...

  10. Feign 客户端的使用 二

    一.Feign的使用(客户端调用 json/xml格式的接口) 1.服务端接口编写 <parent> <groupId>org.springframework.boot< ...