作为前后端交互的重要技巧--发送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. console.log添加样式及图片

    console.log在控制台打出css样式的文字及图片 谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档 Format Specifier %s Formats the val ...

  2. Docker系列之实战:3.安装MariaDB

    环境 [root@centos181001 ~]# cat /etc/centos-release CentOS Linux release 7.6.1810 (Core) [root@centos1 ...

  3. jq ajaxPrefilter 防止重复提交ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. API网关Kong

    官网:https://konghq.com/ 各种方式安装汇总:https://konghq.com/install/ 命令列表:https://docs.konghq.com/0.14.x/admi ...

  5. Golang: chan定义问题(7)

    通常都是定义读写双向的 chan,定义单向 chan 问题. 专栏的介绍可以参考 <GotchaGolang专栏>,代码可以看<宝库-Gotcha>. 通过 只写 chan 传 ...

  6. 提权篇之简单介绍和exp利用过程

    正文开始.... 提权的方法有很多种,因为一开始我入门的时候是看的小迪的网络教程,当然也推荐大家去看小迪的教程,或者直接小迪的实地培训班.这个可没什么利益关系,我认识他,他可不认识我,,但是我是在网上 ...

  7. SpringBoot 全局异常处理 @RestControllerAdvice +@ExceptionHandler 请求参数校验

    ControllerAdvice 指示带注释的类辅助“控制器”. 作为的特殊化@Component,允许通过类路径扫描自动检测实现类. 通常用于定义@ExceptionHandler, @InitBi ...

  8. 初识 “HTML”

    HTML 什么是HTML? ①全称:超文本标记语言②超文本:在普通的文本内容的基础上添加超链接.图片.视频等③标记语言:HTML提供一系列标签④版本:HTML 4.01 HTML声明 1.编码格式:H ...

  9. 每个 JavaScript 工程师都应当知道的 10 个面试题

    1. 能说出来两种对于 JavaScript 工程师很重要的编程范式么? JavaScript 是一门多范式(multi-paradigm)的编程语言,它既支持命令式(imperative)/面向过程 ...

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

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