VUE3 使用axios网络请求

1.新建工程

参考,VUE3 环境搭建:https://blog.csdn.net/LQ_001/article/details/136293795,运行命令 vue create vue-demo

2.引入axios

不管何种引用,都要在工程中安装 axios 包。安装命令:npm install --save axios

2.1 组件引用

直接看代码,代码有注释:

javascript 复制代码
<template>
  <div class="hello"></div>
</template>

<script>
import axios from "axios"  // 组间引用 axios
import querystring from "querystring"  // POST方式,,需要安装 npm install --save querystring

export default {
  name: 'HelloWorld',
  mounted(){

    // get请求方式
    axios({
        method:"get",  // 1. 使用get的请求方式
        url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"  // 2. 输入请求网址
    }).then(res =>{
        // 3.控制台输出请求结果
        console.log(res.data);
    })

    // post 请求方式
    axios({
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({  // 此处使用 querystring
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res => {
        console.log(res.data)
    })

    // 快捷get方案
    axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
        console.log(res.data);
    })

	// 快捷POST方案
    axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
      user_id:"[email protected]",
      password:"iwen123",
      verification_code:"crfvw"
    })).then(res => {
        console.log(res.data)
    })
  }
}

</script>
<style scoped>
</style>

结果如下图,四种方式均请求到数据。

2.2 全局引用

全局引用更加简单。首先,src\main.js文件中,axios挂载到全局。

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import axios from 'axios'

const app = createApp(App)

// 将axios挂载到全局
app.config.globalProperties.$axios=axios
app.mount('#app')

其次,在布局文件里面去掉 import axios from "axios" ,将所有axios函数名替换为this.$axios。修改后的代码如下:

javascript 复制代码
<template>
  <div class="hello"></div>
</template>

<script>
import querystring from "querystring"  // POST方式,,需要安装 npm install --save querystring

export default {
  name: 'HelloWorld',
  mounted(){

    // get请求方式
    this.$axios({  // 使用了全局挂载方式
        method:"get",
        url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
    }).then(res =>{
        // 3.控制台输出请求结果
        console.log(res.data);

    })

    // post 请求方式
    this.$axios({  // 使用了全局挂载方式
        method:"post",
        url:"http://iwenwiki.com/api/blueberrypai/login.php",
        data:querystring.stringify({  // 此处使用 querystring
            user_id:"[email protected]",
            password:"iwen123",
            verification_code:"crfvw"
        })
    }).then(res => {
        // 注意这次接收的是对象类型数据,要将其转化为字符串类型
        // 转化需要安装 npm install --save querystring
        console.log(res.data)
    })


    // 快捷get方案
    this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
        console.log(res.data);
    })
	
	// 快捷POST方案
    this.$axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
      user_id:"[email protected]",
      password:"iwen123",
      verification_code:"crfvw"
    })).then(res => {  // 转化需要安装 npm install --save querystring
        console.log(res.data)
    })
  }
}
</script>

<style scoped>

</style>

结果如下图,四种方式均同样请求到数据。

相关推荐
艾小逗41 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器