3.axios封装网络请求

1.axios安装

npm install --save axios
//用于将post请求中的data对象转化为字符串
npm install --save querystring

2.main.js引入axios并指定全局的$axios

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import axios from "axios"
const app =  createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

3.在任意的组件中用$axios直接进行网络请求：

如在MyCustomComponent.vue中进行网络请求：

<template>
    <div>
        <p>{{ chengpin.title }}</p>
    </div>
</template>
<script>
import querystring from "querystring"
export default {
    name: "MyCustomComponent",
    data() {
        return {
            chengpin: {}
        }
    },
    mounted() {
        // 用全局的$axios进行快捷get请求
        this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
            console.log("--------快捷get请求--------");
            this.chengpin = res.data.chengpinDetails[0];
            console.log(res.data);
        })
        // 用全局的$axios进行快捷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 => {
            console.log("--------快捷post请求--------");
            console.log(res.data);
        })
    }
}
</script>
<style scoped>
</style>

4、在src下创建utils文件夹，并在utils下创建request.js文件来封装axios

request.js文件代码如下：

import axios from "axios"
import querystring from "querystring"
// 网络请求公共配置
const instance = axios.create({
    timeout: 5000
})
// 拦截器，发送数据之前的处理
instance.interceptors.request.use(
    config => {
        if (config.methods === "post") {
            config.data = querystring.stringify(config.data);
        }
        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);
    }
)
// 错误码
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 404:
            console.log("服务器无响应");
            break;
        default:
            console.log(info);
            break;
    }
}
export default instance;

5、在src下添加api文件夹，并在api文件夹下添加path.js文件

path.js文件代码如下：

const base = {
    baseUrl:"http://iwenwiki.com",
    chengpin:"/api/blueberrypai/getChengpinDetails.php"
}
export default base;

6、在api文件夹下添加index.js文件

index.js文件代码如下：

import axios from '../utils/request'
import path from './path'
const api = {
    // 获取成品详情
    getChengpin(){
        return axios.get(path.baseUrl + path.chengpin);
    }
}
export default api;

7、此时便可在任意的组件中引入api进行网络调用了。

比如在MyCustomComponent.vue文件中使用：

<template>
    <div>
        <p>{{ chengpin.title }}</p>
    </div>
</template>
<script>
import querystring from "querystring"
import api from "../api/index"
export default {
    name: "MyCustomComponent",
    data() {
        return {
            chengpin: {}
        }
    },
    mounted() {
        // 用全局的$axios进行快捷get请求
        this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
            console.log("--------快捷get请求--------");
            this.chengpin = res.data.chengpinDetails[0];
            console.log(res.data);
        })
        // 用全局的$axios进行快捷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 => {
            console.log("--------快捷post请求--------");
            console.log(res.data);
        })
        // 用封装的axios进行快捷网络请求
        api.getChengpin().then(res => {
            console.log("--------用封装的axios进行快捷网络请求--------");
            console.log(res.data);
        })
    }
}
</script>
<style scoped>
</style>

效果图：

8、如果不想在组件中重复引入api的操作，也可以把api的引入封装到main.js中去

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//import axios from "axios"
import api from './api/index.js'
const app =  createApp(App)
//app.config.globalProperties.$axios = axios
app.config.globalProperties.$api = api
app.mount('#app')

如果无法引入api，配置一下tsconfig.json文件，添加 “noImplicitAny”: false,即可

MyCustomComponent.vue组件中：

<template>
    <div>
        <p>{{ chengpin.title }}</p>
    </div>
</template>
<script>
//import querystring from "querystring"
export default {
    name: "MyCustomComponent",
    data() {
        return {
            chengpin: {}
        }
    },
    mounted() {
        /*
        // 用全局的$axios进行快捷get请求
        this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res => {
            console.log("--------快捷get请求--------");
            this.chengpin = res.data.chengpinDetails[0];
            console.log(res.data);
        })
        // 用全局的$axios进行快捷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 => {
            console.log("--------快捷post请求--------");
            console.log(res.data);
        })
        */
        // 用封装的axios进行快捷网络请求
        this.$api.getChengpin().then(res => {
            console.log("--------用封装的axios进行快捷网络请求--------");
            console.log(res.data);
        })
    }
}
</script>
<style scoped>
</style>

效果：