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>

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

相关推荐
一颗松鼠1 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds21 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果40 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长44 分钟前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js