您的当前位置:首页vue.js中Axios的概念以及使用方法
广告

vue.js中Axios的概念以及使用方法

2023-11-30 来源:吉希宠物网
本篇文章给大家分享的内容是vue.js中Axios的概念以及使用方法,有着一定的参考价值,有需要的朋友可以参考一下

1.什么是Axios

https://www.kancloud.cn/yunye/axios/234845这是官方中文文档,大家可以看看

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。跟ajax一样都会是用来与后台交互的,但两者之间又有着区别

以下是知乎上的一段话:

axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。

简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。

axios是ajax ajax不止axios,这段话可以很好地诠释两者之间的关系

juuery ajax主要是针对mvc的编程,越来越跟不上现在的节奏了,而且juuery太大,单独为了ajax而引入jquery有点得不偿失,随着越来越多的框架的崛起,jquery的路有些越走越窄

axios具有以下特点

从 node.js 创建 http 请求

支持 Promise API客户端

支持防止CSRF

提供了一些并发请求的接口(重要,方便了很多的操作)

相对于ajax,axios更小巧

说了这么多,大家应该也理解了,两者之间的区别,那么接下来就给大家介绍一下具体用法

先来看一段代码

axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});

对于浏览器的支持

同事支持多个请求

function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 }));

如何安装呢

使用 npm :

 $ npm install axios

使用 bower:

 $ bower install axios

使用 cdn:

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

小编还为您整理了以下内容,可能对您也有帮助:

在vue组件中使用axios的方法

现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢?
通常情况下,我们搭建好的项目目录应该是这样子的
首先需要安装axios,这个会npm的都知道
下一步,在main.js中引入axios
import
axios
from
"axios";
与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作
Vue.prototype.$axios
=
axios;
接着,我们就可以在App.vue中使用axios了
created:function(){
this.$axios.get("/seller",{"id":123}).then(res=>{
console.log(res.data);
});
}
以上这篇在vue组件中使用axios的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:在Vue组件化中利用axios处理ajax请求的使用方法详解axios在vue中的简单配置与使用详解Vue.js
2.0
如何使用axiosVue.js实战之使用Vuex
+
axios发送请求详解vue-axios使用详解

在vue组件中使用axios的方法

现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢?
通常情况下,我们搭建好的项目目录应该是这样子的
首先需要安装axios,这个会npm的都知道
下一步,在main.js中引入axios
import
axios
from
"axios";
与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作
Vue.prototype.$axios
=
axios;
接着,我们就可以在App.vue中使用axios了
created:function(){
this.$axios.get("/seller",{"id":123}).then(res=>{
console.log(res.data);
});
}
以上这篇在vue组件中使用axios的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:在Vue组件化中利用axios处理ajax请求的使用方法详解axios在vue中的简单配置与使用详解Vue.js
2.0
如何使用axiosVue.js实战之使用Vuex
+
axios发送请求详解vue-axios使用详解

关于axios如何全局注册浅析

前言

最近用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() (详细介绍可以参考这篇文章),所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说,多的话未免有点麻烦。

后来想了想,能不能直接把 axios 加到 Vue 的原型中,这样就达到了全局注册了。下面话不多说了,来一看看详细的介绍吧。

方法如下:

1. 首先在 main.js 中引入 axios

import Vue from 'vue'

import axios from 'axios'

//把 `axios` 加到 `Vue` 的原型中

Vue.prototype.axios = axios;

new Vue({

el: '#app',

render:h => h(App)

})

2. 在 .vue 文件中使用时,注意 axios 前要加 this

<script>

export default {

name:'app',

data(){

return{

msg:'hello'

}

},

methods:{

send(){

// 注意:因为 axios 是加到 Vue 的原型中了,所以使用 axios 方法时,前面需要加 this

this.axios.get('https://www.baidu.com*******')

.then(resp => {

console.log(resp.data)

}).catch(err => {

console.log(err);

})

}

}

}

</script>

嗯,就这样,结果当然是没有问题的啦!

总结

吉希宠物网还为您提供以下相关内容希望对您有帮助:

在vue组件中使用axios的方法

首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios";与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios;接着,我们就可以...

Vue.js里使用axios Vue.prototype.$axios = Axios是什么意思啊 没有系...

给Vue函数添加一个原型属性$axios 指向Axios 这样做的好处是在vue实例或组件中不用再去重复引用Axios 直接用this.$axios就能执行axios 方法了

vue.js 怎么引入axios

1 import axios from 'axios'这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 Vue.prototype.$ajax = axios 在 main.js 中添加了这两行代码之后,就能直接...

vue中Axios的封装与API接口的管理详解?

/***post方法,对应post请求*@param{String}url[请求的url地址]*@param{Object}params[请求时携带的参数]*/exportfunctionpost(url,params){returnnewPromise((resolve,reject)=&gt;{axios.post(url,QS.stringify(params)).th...

vue2.0里axios具体怎么使用的,求大神写一个全面一点的代码给我看看

1、建议去GitHub上看官方示例 axiso项目地址:https://github.com/mzabriskie/axios2、网络上的中文教程 axios全攻略:https://ykloveyxk.github.io/2017/02/25/axios全攻略/3、摘录的一些示例 // 执行 GET 请求// ...

父组件axios获取值之后向子组件传值用了immediate也监听不到变化?_百 ...

在 Vue.js 中,我们可以在父组件中使用 axios 获取数据,并将数据作为 props 传递给子组件。但是,有时候,父组件在获取到数据后立即向子组件传递 props,子组件并不能监听到 props 的变化。这可能是因为子组件在 props ...

在vue中如何使用echarts

一、 实现异步加载数据(一)引入vue-resource通过npm下载axios//命令行中输入npm install axios --save在main.js中引入axios并注册// main.jsimport http from './http'Vue.prototype.$http = http //挂载到原型上(二)...

axios如何利用promise无痛刷新token的实现方法

这里会使用axios来实现,方法一是请求前拦截,所以会使用axios.interceptors.request.use()这个方法;而方法二是请求后拦截,所以会使用axios.interceptors.response.use()方法。封装axios基本骨架首先说明一下,项目中的token是存在localStorage中...

vue开发中使用axios请求回来的数据类型status原来是数值,为什么在页面...

在Vue开发中使用Axios发送请求,Axios会默认将响应数据解析为JSON格式,并将其中的数字类型都转化为布尔类型。这是因为在JavaScript中,布尔类型和数字类型都是原始数据类型,并且相互转换的规则是0和NaN转化为false,其他数值转化...

vue axios渲染

我这是直接用response来获取的返回数据类型,如果你要获取js的这个表里数据可以用response.data['prodSpecs']就可以得到这个数组,下面是我的使用:this.axios({ /*headers: {'Authorization': 'bearer '+this.$store.state...

Top