一、环境安装

1、axios的安装

进入到对应工程目录执行：

npm install axios

2、启动测试数据的API

测试项目地址：https://github.com/ShenJianPing0307/VueTestAPI

二、使用axios

使用文档：https://github.com/axios/axios

1、发送get请求实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    {{ userInfo }}

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/axios/dist/axios.js"></script>

<script>

    new Vue({

        el:'#app',

        data:{

            userInfo:[]

        },

        created(){

            //发送get请求获取API数据,自行将json数据反序列化

            axios.get(' http://127.0.0.1:8000/api/userdata/')

                .then((response)=>{

                    // handle success

                    console.log(this); //使用箭头函数this才是Vue实例对象，否则是window对象

                    this.userInfo=response.data;

                    console.log(response.data);

                })

                .catch((error)=>{

                    // handle error

                    console.log(error);

                })

                .finally(()=>{

                    // always executed

                });

        }

    })

</script>

</body>

</html>

2、发送post请求实例

    addItem(context, payload) {

      //发送的直接是json数据，如果返回的是json数据直接就被反序列化了

      axios.post('http://127.0.0.1:8000/api/addUser/',payload.data)

        .then(response=>{

          if (response.data.state) {

            payload.successfunc();   //执行保存成功提示函数

          } else {

            payload.failturefunc(); //执行保存失败提示函数

          }

          //保存返回的数据状态，mutation修改state状态，所以传给mutation处理

          context.commit('ADDITEM', response.data);

        })

},
// 1、Content-Type: application/json

import axios from 'axios'

let data = {"id":"1","name":"aa"};

axios.post('http://127.0.0.1:8000/api/addUser/",data)

.then(res=>{

    console.log('res=>',res);

})

// 2、Content-Type: multipart/form-data

import axios from 'axios'

let data = new FormData();

data.append('id','1');

data.append('name','aa');

axios.post('http://127.0.0.1:8000/api/addUser/",data)

.then(res=>{

    console.log('res=>',res);

})

//Content-Type: application/x-www-form-urlencoded

import axios from 'axios'

import qs from 'qs'

let data = {"id":"1","name":"aa"};

axios.post('http://127.0.0.1:8000/api/addUser/",qs.stringify({

    data

}))

.then(res=>{

    console.log('res=>',res);

})

发送post请求的三种方式

注意：在axios中处理逻辑中使用箭头函数，否则this就是window对象

返回值response中包含的信息：

axios.get(' http://127.0.0.1:8000/api/userdata/')

  .then(function (response) {

    console.log(response.data);//请求的数组数据

    console.log(response.status);//

    console.log(response.statusText);//ok

    console.log(response.headers);//content-type: "text/html; charset=utf-8"

    console.log(response.config);//所有的配置信息包括url,headers,method等

  });

vue之axios的使用的更多相关文章

  1. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  2. Vue框架axios请求（类似于ajax请求）

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  3. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  4. vue 中axios 的基本配置和基本概念

    axios的基本概念及安装配置方法   ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...

  5. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  6. vue中axios的安装和使用

    有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...

  7. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  8. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy（更新）

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

  9. vue cli+axios踩坑记录+拦截器使用，代理跨域proxy

    1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...

  10. 基于vue配置axios

    转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1.背景 在项目开发中ajax请求是必不可缺少 一部分ajax请求不需要loading或则请求 ...

随机推荐

  1. apache下logs下的日志文件简单说明

    一.日志分析 如果apache的安装时采用默认的配置,那么在/logs目录下就会生成两个文件,分别是access_log和error_log 1).access_log access_log为访问日志 ...

  2. Pyhton第八节 字典补充

    Python 字典的基本元素是键值对(key-value), 每个键值对的key和value之间用:分割:每个键值对之间用,分割:整个键值对用花括号{}包围 字典内的键(key)必须唯一,值不需要唯一 ...

  3. 提交disable的Select值到后台

    需求:界面上把select控件disable,然后将默认值传到后台 问题1:select disable: js中可以这样写: document.getElementById("provin ...

  4. 安装 sysbench的 报错 /usr/bin/ld: cannot find -lmysqlclient_r 解决办法

    首先你需要找到这个库的位置 一般找的话需要将lib 给加上(注意:我这里是 -lmysqlclient_r 的报错,于是我找就找 libmysqlclient_r ) find / -name lib ...

  5. 【leetcode】962. Maximum Width Ramp

    题目如下: Given an array A of integers, a ramp is a tuple (i, j) for which i < j and A[i] <= A[j]. ...

  6. leetcode-164周赛-1267-统计参与通信的服务器

    题目描述: 自己的提交: class Solution: def countServers(self, grid: List[List[int]]) -> int: from collectio ...

  7. 计算机网络之IP地址与MAC地址

    IP地址 IP地址(Internet Protocol Address): 缩写为IP Adress,是一种在Internet上的给主机统一编址的地址格式,也称为网络协议(IP协议)地址. 它为互联网 ...

  8. thinkphp IP获取和定位

    系统内置了get_client_ip方法用于获取客户端的IP地址,使用示例: $ip = get_client_ip(); 如果要支持IP定位功能,需要使用扩展类库Org\Net\IpLocation ...

  9. java——String类，时间类，格式化

    日期类 格式化

  10. 文件上传 和 base64编码

    base64编码 1.关于Base64编码  :  https://www.cnblogs.com/liyiwen/p/3814968.html (个人猜测),file表单发送文件,肯定是将文件转换为 ...