基本的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请求 提 ...
随机推荐
- [codeforces940E]Cashback
题目链接 题意是说将$n$个数字分段使得每段贡献之和最小,每段的贡献为区间和减去前$\left \lfloor \frac{k}{c}\right \rfloor$小的和. 仔细分析一下可以知道,减去 ...
- Spring Data Elasticsearch基本使用
目录 1. 创建工程 2. 配置application.yaml文件 3. 实体类及注解 4. 测试创建索引 5. 增删改操作 5.1增加 5.2 修改(id存在就是修改,否则就是插入) 5.3 批量 ...
- 设计模式之单例模式(Singleton Pattern)
单例模式是最简单的设计模式之一.属于创建型模式,它提供了一种创建对象的最佳方式.使应用中只存在一个对象的实例,并且使这个单实例负责所有对该对象的调用.这种模式涉及到一个单一的类,该类负责创建自己的对象 ...
- PHP控制session时效(转)
1.php session 有效期php的session有效期默认是1440秒(24分钟),如果客户端超过24分钟没有刷新,当前session会被回收,失效. 当用户关闭浏览器,会话结束,sessio ...
- qt QAbstractItemModel一些方法介绍
一. virtual bool setData(const QModelIndex &index, const QVariant &value, int role = Qt::Edit ...
- jQuery全选功能
$(document).ready(function(){ //为父按钮添加事件 $("#chk_all").click(function(){ var a=$("#ch ...
- 初探html-17 表单
HTML 表单和输入 HTML 表单用于收集不同类型的用户输入. 在线实例 <form action=""> First name: <input type=&q ...
- 关于时间:UTC时间、GMT时间、本地时间、Unix时间戳
1.UTC时间 与 GMT时间我们可以认为格林威治时间就是时间协调时间(GMT=UTC),格林威治时间和UTC时间均用秒数来计算的. 2.UTC时间 与 本地时UTC + 时区差 = 本地时间时区差东 ...
- 2019-11-29-dotnet-使用-Qpush-快速从电脑到手机推送文字
title author date CreateTime categories dotnet 使用 Qpush 快速从电脑到手机推送文字 lindexi 2019-11-29 08:58:57 +08 ...
- TCP Retransmission 连接超时
TCP Retransmission 连接超时 kame 2019/3/17 33 TCP 记一次TCP 连接超时 背景 用户反馈 >> 有出现支付超时.页面问题 (部分情况会出现) 分析 ...