axios怎么引入到vue中?

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使用axios。

axios本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest

  • 从 node.js 发出 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换JSON数据

  • 客户端支持防止 CSRF/XSRF

为什么选择axios?

  1. 使用axios可以统一做请求-响应拦截,例如响应时我们将响应信息拦截起来,判断状态码,从而弹出报错信息

  2. 设定请求超时,例如3000ms未响应则停止请求

  3. 基于promise,可以很方便地使用then或者catch来处理请求

  4. 自动转换json数据

axios怎么引入到vue中?

1、安装

可以直接使用npm install来进行安装。

npm install axios
//使用淘宝源
cnpm install axios

2、引入axios

只需要在需要的vue文件中引入axios就可以,语句:

import axios from 'axios'

安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不 是vue插件,所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。 为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用。

//main.js
import axios from 'axios'
Vue.prototype.$axios = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $axios命令

methods: {    
get () {       
let self = this 
 // 请求后台       
this.$axios({        
  method: 'post',        
  url: '/url',
  data: {}
 }).then((result) => {         
   console.log(result)      
 })     
 }  
}

也可以通过CDN的方式直接引入到html中,然后在JS中直接使用,方式如下:

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js" type="text/javascript"></script>
    </head>
    <body>
        
        <script type="text/javascript">
            axios({
                url:"https://www.baidu.com/",
                headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                method:'post',
                data:{age:30}       
            }).then((res)=>{
                console.log(res);
            }).catch((err)=>{
                console.log(err)
            })          
        </script>
    </body></html>
Image placeholder
前端答疑
未设置
  96人点赞

没有讨论,发表一下自己的看法吧

推荐文章
echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

.vue文件怎么引入本地图片

.vue文件怎么引入本地图片.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。本地图片路径:在.

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

ajax怎么在vue中使用?

ajax怎么在vue中使用?axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护本文为大家介绍vue使用a

YOLO目标检测从V1到V3结构详解

本文主要内容是对YOLO系列进行综述目标检测评价指标IoU(Intersection-over-Union)指标IoU简称交并比,顾名思义数学中交集与并集的比例。假设有两个集合A与B,IoU即等于A与

ie11下不能引入外部css怎么解决?

ie11下不能引入外部css怎么解决?问题:在IE11下使用link标签引入css时,无法正常引入,直接在页面中使用style标签没问题。原因:头文件的问题。解决方法:●删除头部的●或者,将头部改成

vue中如何关闭eslint检测?

vue中如何关闭eslint检测?有了eslint的校验,可以来规范开发人员的代码,是挺好的。但是有些像缩进、空格、空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了。所以,下面来介绍下怎么在v

vue中的diff算法详解

1.当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的

理解Vue中间件管道

通常,在构建SPA时,需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的dashboard路由,我们可以通过使用auth中间件来确保合法用户才能访问它。在本教程中,我们将学到怎样用Vue-

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

在react中怎么引用js

在react中怎么引用js推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。第一种:使用插件react-load-script如果没有安装

react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

jquery怎么设置checkbox不选中?

jquery怎么设置checkbox不选中?jquery对checkbox进行操作需要使用prop()方法。1、设置不选中:$("#my-checkbox").prop("checked",false

jquery怎么判断值是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等Jquery方法可以使用Jquery提供的方法:使用$.inArray()来判断。inArray()函数用于在数组中查找指

node中文什么意思?

起初,RyanDahl称他的项目为web.js,就是一个Web服务器,但是项目的发展超过了他最初单纯开发一个Web服务器的想法,变成了构建网络应用的一个基础框架,这样可以在它的基础上构建更多的东西,诸

leveldb源代码分析系列1.1:memtable中comparator的实现

leveldb中memtable封装了一个skiplist用来存储真正的数据,跳跃列表的实现一定需要定义存储项的序关系,而在leveldb中这个序关系通过comparator相关类来实现。leveld

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

vue引入图片问题

一、img标签二、scss文件通过在vue文件引入scss样式文件 @import"./scss/index.scss"; 如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式

jquery判断checkbox是否被选中?

jquery判断checkbox是否被选中?一、is()方法进行判断$("input[type='checkbox']").is(':checked')返回true或false二、attr()方法进行

jquery判断radio是否选中?

jquery判断radio是否选中?1、使用jquery先获取元素,再通过get()方法转为dom对象,最后读取checked属性即可。if($("#checkbox-id").get(0).chec

jquery如何判断元素是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等。可以使用Jquery提供的方法:$.inArray("元素(字符串)",数组名称)进行判断,当存在该元素(字符串)时,返