Vue.js之使用axios进行get、post传参

axios

定义

基于Promise的HTTP客户端，用于浏览器和node.js

特征

• 做的XMLHttpRequest从浏览器
• 让HTTP从node.js的请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防范XSRF

安装

三种方式，均可进行

$  npm install axios    //使用npm
$  bower install axios   //使用bower
    //通过cdn直接调用

使用

发送一个Get请求

添加引用

import axios from 'axios';

使用模板

axios.get(url).then(function (response) {
	//具体操作
	console.log(response.data);
}).catch (function (error) {
	console.log(error);
}

具体实例

无参数

var url =  'http://192.168.**.***:8080/Card';
   axios.get(url).then(function(response) {
     if (response.data == false) {
        this.$Message.success("注册成功");
     } else {
       this.$Message.info("注册失败");
     }
   });

有参数

需要进行字符串拼接

var id = 001;
var url =  'http://192.168.**.***:8080/Card';
url += 	`?cardId=${id}`;//拼接字符串
   axios.get(url).then(function(response) {
     if (response.data == false) {
        this.$Message.success("注册成功");
     } else {
       this.$Message.info("注册失败");
     }
   });

发送一个Post请求

添加引用

import axios from 'axios';
import qs from 'qs';

使用模板

axios.post('url', {
    数据库字段1: 'value',
    数据库字段2: 'value'
  }
  )
  .then(function (response) {
   //具体操作
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

具体实例（一）

var url =  ''http://192.168.**.***:8080/Card'; 
      axios
        .post(
          addurl,
          qs.stringify({
            cardId: ‘001’,
            password: '1',
            Name: ‘Seven’,
            status: '使用',
          })
        )
        .then(function(response) {
          if (response.data == true) {
            vm.$Notice.open({
              title: '注册成功',
              duration: 2 //n秒后消失
            });
          } else {
            vm.$Notice.open({
              title: '注册失败',
              duration: 2 //n秒后消失
            });
          }
        })
        .catch(err => {
          console.log(err);
        });

具体实例（二）

var url =  ''http://192.168.**.***:8080/Card'; 
      axios
        .post(
          addurl,
            {
            cardId: ‘001’,
            password: '1',
            Name: ‘Seven’,
            status: '使用',
          }
        )
        .then(function(response) {
          if (response.data == true) {
            vm.$Notice.open({
              title: '注册成功',
              duration: 2 //n秒后消失
            });
          } else {
            vm.$Notice.open({
              title: '注册失败',
              duration: 2 //n秒后消失
            });
          }
        })
        .catch(err => {
          console.log(err);
        });