前端篇-axios详细介绍

大卫软件测试

已于 2024-03-14 15:34:21 修改

阅读量397

点赞数 3

分类专栏：大卫前端总结文章标签：前端 javascript vue.js

于 2024-03-14 10:23:38 首次发布

本文链接：https://blog.youkuaiyun.com/qadnkz/article/details/136700596

版权

大卫前端总结专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Vueaxios在Vue项目中的基础使用，包括GET和POST请求的两种方式，以及如何处理不同Content-Type（如JSON和multipart/form-data）。

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

资料1

Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）-优快云博客

资料2

3分钟让你学会axios在vue项目中的基本用法（建议收藏）_vue axios-优快云博客

get请求：方式1

//发送的请求为： http://localhost:5000/save?id=1
this.$axios.get('http://localhost:5000/save',{
                params: {
                    id:1
                }
            }).then(res=>{
                    console.log(res.data);
                },err=>{
                    console.log(err);
            })

get请求：方式2

//发送的请求为： http://localhost:5000/save?id=1
this.$axios({
		method: 'get',
		url: 'http://localhost:5000/save',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

post请求：方式1

// axios发送的请求头为: Content-Type: application/json
m1(){
        let data1 = {"user":"zhangsan","pass":2}
        this.$axios.post('http://localhost:5000/save',data1).then(
            res=>{
              console.log(res.data)
              console.log(res.data["user"])
              this.abc = res.data["pass"]

          },err=>{
              console.log(err)
            }).catch(err=>{console.log(err)})
    }

post请求：方式2

m2(){
      // axios发送的请求头为: Content-Type: multipart/form-data;
      let data = {
        "user":"zhangsan","pass":2
      }
      let formdata = new FormData();
      for(let key in data){
        formdata.append(key,data[key]);
      }

      this.$axios.post('http://localhost:5000/save',formdata).then(
          res=>{
            console.log(res.data)
            console.log(res.data["user"])
            this.abc = res.data["pass"]

          },err=>{
            console.log(err)
          }).catch(err=>{console.log(err)})
    }