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:"iwen@qq.com",
            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:"iwen@qq.com",
      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:"iwen@qq.com",
            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:"iwen@qq.com",
      password:"iwen123",
      verification_code:"crfvw"
    })).then(res => {  // 转化需要安装 npm install --save querystring
        console.log(res.data)
    })
  }
}
</script>

<style scoped>

</style>

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

相关推荐
程序猴老王5 分钟前
el-select 和el-tree二次封装
前端·vue.js·elementui
blzlh17 分钟前
手把手教你做网易云H5页面,进大厂后干的第一件事
前端·javascript·css
贩卖纯净水.43 分钟前
网站部署及CSS剩余模块
前端·css
Justinc.1 小时前
CSS3_BFC(十二)
前端·css·css3
梅子酱~1 小时前
Vue 学习随笔系列十七 -- 表格样式修改
javascript·vue.js·学习
刺客-Andy1 小时前
React第四节 组件的三大属性之state
前端·javascript·react.js
黄毛火烧雪下1 小时前
React 表单Form 中的 useWatch
前端·javascript·react.js
爱健身的小刘同学2 小时前
钉钉免登录接口
前端·javascript·钉钉
啵咿傲2 小时前
跨域相关的一些问题 ✅
前端
一位资深码农2 小时前
弹幕发送功能‘简单’实现
spring boot·vue