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

最新推荐文章于 2025-05-28 11:41:52 发布

`Seven

最新推荐文章于 2025-05-28 11:41:52 发布

阅读量9.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ——【Vue.js】

本文链接：https://blog.youkuaiyun.com/sevengirl2017/article/details/88717071

——【Vue.js】专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用axios库进行GET和POST请求。详细阐述了无参数和有参数的GET请求，以及POST请求的具体实例，包括数据的字符串拼接。还提及了axios的特性，如Promise API支持、请求和响应拦截等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios

定义

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

特征

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

安装

三种方式，均可进行

$  npm install axios    //使用npm
$  bower install axios   //使用bower
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>    //通过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);
        });