首先安装axios:

  1. 1):npm install
  2.  
  3. 2):npm install vue-axios --save
  4.  
  5. 3):npm install qs.js --save  //它的作用是能把json格式的直接转成data所需的格式

安装成功后,在main.js页面引用:

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

最后开始使用请求:

  1. <script>
  2. export default{
  3. data(){
  4. return{
  5. userId:666,
              token:'',
  6. }
  7. },
  8. created(){
  9. this.$axios({
  10. method:'post',
  11. url:'api',
  12. data:this.qs.stringify({ //这里是发送给后台的数据
  13. userId:this.userId,
  14. token:this.token,
  15. })
  16. }).then((response) =>{ //这里使用了ES6的语法
  17. console.log(response) //请求成功返回的数据
  18. }).catch((error) =>{
  19. console.log(error) //请求失败返回的数据
  20. })
  21. }
  22. }
  23. </script>

本文介绍的是axios的基本用法,详细看官方文档https://github.com/axios/axios

基本的axios用法的更多相关文章

  1. 第六节:前后端交互之axios用法及async异步编程

    一. axios用法 参考: API文档: https://www.kancloud.cn/yunye/axios/234845 GitHub: https://github.com/axios/ax ...

  2. Vue2.0学习——axios用法详解

    功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 自动转换 JSON 数据 客 ...

  3. axios 用法简介(转载)

    axios 来源:https://www.jianshu.com/p/df464b26ae58   一.安装 1. 利用npm安装npm install axios --save2. 利用bower安 ...

  4. axios用法

    1 axios.get('https://api.apiopen.top/getJoke?type=all', { 2 params: {//用于传参 3 type: 'all' 4 } 5 }).t ...

  5. ajax、fetch、axios — 请求数据

    jquery ajax jq 的ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持.用起来非常方便 用法: $.ajax({ url:发送请求的地址, data:数据的拼接,//发送到服 ...

  6. 理解 ajax、fetch和axios

    背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...

  7. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  8. axios用法全解

    [前言] 本文介绍下axios用法,希望对大家有所帮助 这里声明一句:请求数据一般放置到哪里?详见下篇文章 [主体] (1)下载 npm i axios --save (2)引入axios模块 方式1 ...

  9. 简简单单的Vue4(vue-cie@3.x,vue’Debug[调试],vue‘sHttp)

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...

随机推荐

  1. maven坐标Dependencies和Exclusions详解

    1.概念介绍 Dependencies:是可选依赖(Optional Dependencies) Exclusions:是依赖排除(Dependency Exclusions) 2.Dependenc ...

  2. vue点击出现蒙版

      需求: 1.点击一个事件时弹出一个蒙版: 2.蒙版上有取消,删除事件:(点击取消时候蒙版消失,点击删除时,删除蒙版并消失): 3.点击空白地方,蒙版也消失:   <template> ...

  3. intellij 编译 springmvc+hibernate+spring+maven 找不到hbm.xml映射文件

    1. 错误信息 Invocation of init method failed; nested exception is org.hibernate.MappingNotFoundException ...

  4. 014-Zabbix的自动发现

    Zabbix自动发现是通过(1)网络扫描或(2)代理主动发现实现监控.本文主要介绍网络扫描的发现方式,并深入介绍底层监控项的主动发现功能. 网络发现(Discovery) 对于网络发现最需要理解的就是 ...

  5. oracle高水位降低法

    1.什么是高水位?(high water mark 简称:HWM)     所有的oracle段(segments,在此,为了理解方便,建议把segment作为表的一个同义词)都有一个在段内存放数据的 ...

  6. c字符串函数

    1.  bcmp(3) 类ma似于strncmp(3) 但是比较结果不一定是两个字符的ascii码之差. 返回值:相等0,不相等非零(不一定是-1) 2.bcopy(3)类ma似于strncpy(3) ...

  7. linux高性能服务器编程pdf免费下载

    百度云盘:链接: https://pan.baidu.com/s/1pLp4hHx 密码: wn4k

  8. FCC 成都社区·前端周刊 第 6 期

    01. JS 引擎 V8 v6.6 的更新 最新 v6.6 版本的 V8 JavaScript 引擎更新了方法 Function.prototype.toString(),改进了代码缓存机制.异步性能 ...

  9. Kendo UI使用教程:CDN服务

    [Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...

  10. Tronado【第2篇】:tronado自定义Form组件

    Tronado自定义Form组件 一.获取类里面的静态属性以及动态属性的方法 方式一: # ===========方式一================ class Foo(object): user ...