作为前后端交互的重要技巧--发送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. 将js进行到底:node学习4

    使用Node做web开发 HTTP与TCP 上一回使用node.js的NET(TCP)模块开发了一个聊天室demo.单纯用到了原始的TCP协议,可以说TCP是HTTP,SMTP,FTP的鼻祖了,后面的 ...

  2. Java Annotation/Scope

    1.在计算机编程语言Java中,什么是注释(Annotation)? 注释是一种可以添加到Java源代码的语法元数据或描述(注释不影响程序执行) 2.注释(Annotation)有什么作用?    ( ...

  3. 一、HTTP和HTTPS的基本概念

    1HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. 2HT ...

  4. 张益肇:AI 医疗,微软有哪些布局?

    编者按:近几年来,医疗和人工智能碰撞出了相当多的火花,大量资金短期投入到医疗领域当中.然而在微软亚洲研究院副院长张益肇博士看来,人工智能医疗是一场持久战,大家一定要沉下心多调研.多思考.多学习. 人工 ...

  5. C++走向远洋——33(静态成员的应用)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:time.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  6. Hadoop环境搭建问题总结

    最近抽空搭建了Hadoop完全分布式环境,期间遇到了很多问题,大部分问题还是可以在网上搜到的,这里说下自己遇到的两个没有找到结果的问题吧. 1.启动时报:没有那个文件或目录 原因:三台机器的用户名不一 ...

  7. iOS Swift 开发语言之初接触,纯代码创建UIView,UITableView,UICollectionView

    1. 初始化Label设置AttributeString override func viewDidLoad() { let label = UILabel(frame:CGRect(x:,y:,wi ...

  8. Javascript元编程之Annotation

    语言的自由度 自由度这个概念在不同领域有不同的定义,我们借鉴数学中构成一个空间的维数来表达其自由度的做法,在此指的是:解决同一个问题彼此不相关的设计方法学数量. 例如,解决一个比如商品打折的问题,如何 ...

  9. PySide2的This application failed to start because no Qt platform plugin could be initialized解决方式

    解决PySide2的This application failed to start because no Qt platform plugin could be initialized问题 今天在装 ...

  10. mongoose .find().limit()返回undefined

    当我们使用mongoose的find方法查询数据库的同时,可以使用limit方法来指定返回数据的条数. limit方法基本语法如下所示: >db.COLLECTION_NAME.find().l ...