作为前后端交互的重要技巧--发送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. idea maven 项目可以运行但依赖包一直是红色

    一句话!!!重启一下idea 红红的一片很烦!!!!!重启

  2. Python学习笔记(四)函数式编程

    高阶函数(Higher-order function) Input: 1 abs Output: 1 <function abs> Input: 1 abs(-10) Output: 1 ...

  3. Zookeeper:fsync超时导致实例异常

    一.问题描述 2019-02-19 08:44左右,实时计算服务重启,报错显示找不到zk集群的leader节点,同时ZooKeeper集群有告警显示连接超时: 指标[连接耗时(ms)=18221]符合 ...

  4. 烘焙ID贴图

    ID贴图(ID Map)的作用主要就是用来区分同一个模型中不同的区块,具体的用法查看此文.下面介绍几种不同的方式来烘焙ID贴图,用到的工具分别是Blender和Substance Painter. 在 ...

  5. Microsoft Translator:打破语言障碍 拓展全球沟通新机遇

    Translator:打破语言障碍 拓展全球沟通新机遇"> 作者:Olivier Fontana, 微软研究院Microsoft Translator产品战略总监 世界越来越小,全球协 ...

  6. symfony 5.05 dev安装为了更好的迭代更新

    我的项目目录 安装命令  composer create-project symfony/website-skeleton:^5.0.x-dev manage 数据查询测试输出

  7. maven笔记--持续更新

    笔记: 在创建maven项目的时候,如果用到servlet的时候,需要导入包,这时候,需要导入本地仓库的jar包,即依赖包.语法如下 <dependency> <groupId> ...

  8. 使用timeit测试Python函数的性能

    timeit是Python标准库内置的小工具,可以快速测试小段代码的性能. 认识timeit timeit 函数: timeit.timeit(stmt, setup,timer, number) 参 ...

  9. es6中的属性名表达式

    代码如下: 问题: 为什么我可以这样给obj1对象添加动态属性? 为什么我最终的结果是只添加了right属性? 解答: 1. 第一个问题解答如下: 我们知道在es5中给对象添加属性有两种方法,一种是通 ...

  10. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...