以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件。这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求。

第一步,需要通过npm安装插件,需要安装两个插件,它们分别是axios,vue-axios

npm install --save axios vue-axios

第二步,需要在项目中的入口js文件引入这两个插件

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios' Vue.use(VueAxios,axios)

第三步,在项目中使用axios进行ajax请求

//写法1
Vue.axios.get(api).then((response)=>{
console.log(response.data);//成功回调
},(response)=>{
//失败回调
})
//写法2
this.axios.get(api).then((response)=>{
console.log(response.data);//成功回调
},(response)=>{
//失败回调
})
//写法3
this.$http.get(api).then((response)=>{
console.log(response.data);//成功回调
},(response)=>{
//失败回调
})

这就是axios请求ajax简单的例子。很简单,对吧?一起在项目中使用新的技术吧O(∩_∩)O~
vue-axios地址:https://github.com/imcvampire/vue-axios

作者:whiteMu
链接:https://www.jianshu.com/p/aa989357846c
转发

vue使用axios进行ajax请求的更多相关文章

  1. [Vue]使用axios实现ajax请求

    1.定义myAjax export const myAjax=function createHttpClient(ajaxConfig) {   let httpClient = null;   if ...

  2. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  3. Axios发送AJAX请求

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

  4. axios 或 ajax 请求文件

    axios 或 ajax 请求文件 axios({ url: path + '/monitor/exportPicture' + '?access_token=' + getToken(), meth ...

  5. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  6. Axios 取消 Ajax 请求

    Axios 取消 Ajax 请求 Axios XMLHttpRequest https://caniuse.com/?search=XMLHttpRequest https://developer.m ...

  7. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

  8. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  9. vue使用axios,进行网络请求

    1.首先自己创建一个组件: https://www.cnblogs.com/fps2tao/p/9559291.html 2.安装:axios(可以npm安装,也可以下载js引入文件) npm ins ...

随机推荐

  1. find命令计算代码行数

    [anonymous@localhost ~/lvs/ipvsadm- -regex '.*Makefile.*' -o -regex '.*\.[ch]' -exec cat {} \; | wc ...

  2. async for的使用

    import random import asyncio async def random_number_gen(delay, start, end): while True: yield rando ...

  3. 使用Pillow(PIL)库实现中文字符画

    上班摸鱼写的,不多说了,直接上脚本 #coding=utf-8 from PIL import Image from PIL import ImageDraw from PIL import Imag ...

  4. 安装wget 、 wget命令

    今天给服务器安装新LNMP环境时,wget 时提示 -bash:wget command not found,很明显没有安装wget软件包.一般linux最小化安装时,wget不会默认被安装. 可以通 ...

  5. LeetCode 岛屿的最大面积(探索字节跳动)

    题目描述 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二维矩阵的四个边缘都被水包围着. 找到给定的 ...

  6. LeetCode 44. 通配符匹配(Wildcard Matching)

    题目描述 给定一个字符串 (s) 和一个字符模式 (p) ,实现一个支持 '?' 和 '*' 的通配符匹配. '?' 可以匹配任何单个字符. '*' 可以匹配任意字符串(包括空字符串). 两个字符串完 ...

  7. laravel如何从mysql数据库中随机抽取n条数据

    laravel如何从mysql数据库中随机抽取n条数据 一.总结 一句话总结: inRandomOrder():$userQuestions=UserQuestion::where($map)-> ...

  8. Qt可扩展窗口实现

    前言 有时候需要实现窗口可扩展,换句话说有一部分widget能够隐藏,显示,并且对话框大小可以随着widget变动而做出相应的变化:如图: 在点击CheckBox时,GroupBox_2能够显示,取消 ...

  9. Java泛型(4):泛型与匿名内部类

    泛型同样也可以使用在匿名内部类中. 下面的例子是对 Java泛型(3):泛型方法 中例(2)的修改. public interface Generator<T> { T next(); } ...

  10. 连载二:RobotFramework+Svn+Jenkins集成测试

    使用SVN和Jenkins完成脚本的持续集成测试 目标: 1)使用svn管理脚本: 2)使用jenkins执行脚本: 3)在jenkins中配置svn自动获取最新的脚本执行: 步骤: (1)安装Jen ...