首先安装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用法的更多相关文章

  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. 2019.07.09 纪中_B

    错失AK记 2019.07.09[NOIP提高组]模拟 B 组 明明今天的题都很水,可就是没蒟蒻. 写题的时候: T0一眼高精(结果没切)T1看到2啊8啊果断转二进制观察,发现都是左移几位然后空出的位 ...

  2. echarts图标使用(一)

    var data = []; // Parametric curve // for (var t = 0; t < 25; t += 0.001) { // var x = (1 + 0.25 ...

  3. 12.AutoMapper 之Null替换(NullSubstitution)

    https://www.jianshu.com/p/3f86f237d1db Null 替换(Null Substitution) Null 替换允许当源类型成员在成员链任何位置为Null时给目标成员 ...

  4. RS chap1:好的推荐系统

    一.什么是推荐系统 1.个性化推荐系统:从庞大的电影库中找几部符合你兴趣的电影供你选择. 2.推荐系统是帮助用户快速发现有用信息的工具.和搜索引擎不同的是,推荐系统不需要用户提供明确的需求,而是通过分 ...

  5. MySQL on duplicate key update 批量插入并更新已存在数据

    业务上经常存在一种现象,需要批量往表中插入多条数据,但在执行过程中,很可能因为唯一键冲突,而导致批量插入失败.因此需要事先判断哪些数据是重复的,哪些是新增的.比较常用的处理方法就是找出已存在的数据,并 ...

  6. HTML-复杂动画和变形

    1.复杂动画 (1)涉及到的属性: animation-name:动画名称: animation-duration:单次动画总时长: animation-timing-function:时间函数: a ...

  7. 日语能力考试N2级必备外来语

    日语能力考试N2级必备外来语 ア行外来语アンテナ:(antenna)         天线インタビュー :(interview)         采访,访谈ウイルス:(virus )        病 ...

  8. Linux安装FastDFS~Nginx~

    确保Linux联网,我这里使用的是CentOS7操作,联网教程 https://www.cnblogs.com/taopanfeng/p/10978752.html 先把指定的四个文件放入指定目录 安 ...

  9. 常用插件html

    1.上传模板,插件 https://github.com/kartik-v/bootstrap-fileinput 2.

  10. mysql占用磁盘IO过高的解决办法

    一.现象 最近发现Mysql服务器磁盘IO一直很高 [root@push-- ~]# iostat -k -d -x Linux -.el7.x86_64 (push--) 2019年07月05日 _ ...