基本的axios用法
首先安装axios:
1):npm install 2):npm install vue-axios --save 3):npm install qs.js --save //它的作用是能把json格式的直接转成data所需的格式
安装成功后,在main.js页面引用:

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs' Vue.prototype.$axios = axios //全局注册,使用方法为:this.$axios
Vue.prototype.qs = qs //全局注册,使用方法为:this.qs

最后开始使用请求:

<script>
export default{
data(){
return{
userId:666,
token:'',
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:this.qs.stringify({ //这里是发送给后台的数据
userId:this.userId,
token:this.token,
})
}).then((response) =>{ //这里使用了ES6的语法
console.log(response) //请求成功返回的数据
}).catch((error) =>{
console.log(error) //请求失败返回的数据
})
}
}
</script>

本文介绍的是axios的基本用法,详细看官方文档https://github.com/axios/axios
基本的axios用法的更多相关文章
- 第六节:前后端交互之axios用法及async异步编程
一. axios用法 参考: API文档: https://www.kancloud.cn/yunye/axios/234845 GitHub: https://github.com/axios/ax ...
- Vue2.0学习——axios用法详解
功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 自动转换 JSON 数据 客 ...
- axios 用法简介(转载)
axios 来源:https://www.jianshu.com/p/df464b26ae58 一.安装 1. 利用npm安装npm install axios --save2. 利用bower安 ...
- axios用法
1 axios.get('https://api.apiopen.top/getJoke?type=all', { 2 params: {//用于传参 3 type: 'all' 4 } 5 }).t ...
- ajax、fetch、axios — 请求数据
jquery ajax jq 的ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持.用起来非常方便 用法: $.ajax({ url:发送请求的地址, data:数据的拼接,//发送到服 ...
- 理解 ajax、fetch和axios
背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- axios用法全解
[前言] 本文介绍下axios用法,希望对大家有所帮助 这里声明一句:请求数据一般放置到哪里?详见下篇文章 [主体] (1)下载 npm i axios --save (2)引入axios模块 方式1 ...
- 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...
随机推荐
- awk对文件的奇偶行做处理
{ if(NR % 2 == 0) printf("%s\n", $0) else printf("%s, ", $1) } awk -f awk.awk da ...
- 如何申请百度小程序的appid(目前不支持个人账号申请)
一.搜索百度智能小程序,并使用百度账号登陆 填写相关资料进入审核阶段,审核成功即可进入百度小程序开发者后台.打开“智能小程序首页”-“设置”-“开发设置”, 查看百度小程序的 AppID
- 使用Lombok来优雅的编码
介绍在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/setter/toString等方法的编写. IDEA中的安装打开IDEA的Setting –> 选择Plugins选 ...
- uni-app导航栏配置
uni-app写app的内容会与沉浸栏重合在一起,写好好多,都是有点问题的,这次终于找到解决的方法了,与大家分享一下 最简单的解决方式就是配置mainfest.json来关闭沉浸式.即通过打开应用的m ...
- laraveladmin省市区三级联动
Distpicker是一个中国省市区三级联动选择组件,这个包是基于Distpicker的laravel-admin扩展,用来将Distpicker集成进laravel-admin的表单中 安装 com ...
- php判断变量是否为数字is_numeric()
is_numeric — 检测变量是否为数字或数字字符 <?php $tests = array( "31", 1380, "1e4", "no ...
- 对OO原则的个人理解
1.单一职责原则.(Single Responsibility Principle) 注解:社会化大生产分工要细.具体每个人最好只做一件事(不要一人兼多职),这样如果这个人请假或辞职,对生产不会产生影 ...
- git每次更新都需要输入账号密码,如何解决?
//如果https请求pull每次都需要输入账号密码,则 git config --global credential.helper store 那么,在下一次更新,需要输入账号密码,然后git就 ...
- mapper映射文件配置之select、resultMap(转载)
原文地址:http://www.cnblogs.com/dongying/p/4073259.html 先看select的配置吧: <select <!-- 1. id ( ...
- UEditor富文本编辑器简单使用
UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...