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 组件引用

直接看代码，代码有注释：

<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挂载到全局。

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。修改后的代码如下：

<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>

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

3.axios封装

VUE3 新建工程，运行命令 vue create vue-demo
新建工程后，确保安装包：

npm install --save axios
npm install --save querystring

新建文件，新建文件 src\utils\request.js，插入下面代码封装网络请求。

import axios from "axios";
import querystring from "querystring"

const errorHandle = (status, info) => {
    switch(status){
        case 400:console.log("语义有误");break;
        case 401:console.log("服务器认证失败");break;
        case 403:console.log("服务器拒绝访问");break;
        case 404:console.log("地址错误");break;
        case 500:console.log("服务器遇到意外");break;
        case 502:console.log("服务器无响应");break;
        default:console.log(info);break;
    }
}

// 1.创建网络请求对象
const instance = axios.create({

    // 这里放网络请求的公共配置
    timeout:5000
})

// 拦截器----发送数据之前
instance.interceptors.request.use(
    config =>{  // 拦截器成功函数

        if(config.methods == "post"){
            config.data = querystring.stringify(config.data)
        }

        // config:包含着网络请求的所有信息
        return config;
    },
    error =>{  // 拦截器失败函数

        // 返回错误信息
        return Promise.reject(error)
    }
)

// 拦截器----获取数据之前
instance.interceptors.response.use(
    response =>{  // 拦截器成功函数
        return response.status == 200 ? Promise.resolve(response):Promise.reject(response)
    },
    error =>{  // 拦截器失败函数
        const { response } = error;
        errorHandle(response.status,response.info)
    }
)

//2.导出网络请求对象
export default instance;

网络封装完毕之后。
新建 src\api\path.js文件写入网络地址路径，如下例子：

const base = {  // 公共地址
    baseUrl:"http://iwenwiki.com",
    chengpin:"/api/blueberrypai/getChengpinDetails.php"
}

// 导出公共地址
export default base;

新建src\api\index.js文件封装网络请求 API，如下例子：

import axios from "../utils/request"
import path from "./path"

const api = {
    // 成品详细地址
    getChenpin(){
        return axios.get(path.baseUrl + path.chengpin)
    }
}

export default api;

3.1 使用封装

如下代码：

<template>
  <div class="hello"></div>
</template>

<script>
import api from '../api/index';

export default {
  name: 'HelloWorld',
  props:{
    msg: String
  },
  mounted(){
    api.getChenpin().then(res =>{
      console.log(res.data);
    })
  }
}
</script>

<style scoped>

</style>

代码结果，成功通过封装请求到数据：