36.Vue3：Axios网络请求封装

第一步

在src目录下创建文件夹utils，并创建文件request.js，用来存储网络请求对象axios

// 在src目录下创建文件夹utils，并创建文件request.js，用来存储网络请求对象axios

import axios from "axios";
import qs 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;

    }
}

// 创建一个属于自己的网络请求对象
const instance = axios.create({
    // 网络请求的公共配置
    //请求的超时时间为5秒
    timeout: 5000
})

// 定义拦截器，拦截器是最常用的。常用于获取数据之前和发送数据之前做一些处理

// 发送数据之前的拦截器
instance.interceptors.request.use(
    //config是定义成功的函数
    // config 包含着网络请求的所有信息
    config => {
        // post请求需要转换格式，要单独处理。如果
        // 字典传递进去抛出"参数缺失,请提供完整参数"的错误,请参考35博客
        if (config.method == "post") {
            config.data = qs.stringify(config.data)
            return config
        }
        // get请求
        if (config.method == 'get') {
            return config
        }
    },
    // error 定义失败的函数
    error => Promise.reject(error)
)

// 获取数据之前的拦截器
instance.interceptors.response.use(
    // 成功也仅仅代表收到错误或者收到成功两种        成功                       失败
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error => {
        // 发送和接收的过程存在问题
        // response包含所有错误的信息
        const { response } = error;
        // 错误信息更值得我们关注
        errorHandle(response.status, response.info)
    }
)

export default instance;// 导出网络请求

第二步：

在src目录下创建文件夹api，并创建文件index.js和path.js分别存放网络请求方法和请求路径

//path.js

const base = {
    baseUrl :"http://iwenwiki.com", // 公共路径
    chengpin:"/api/blueberrypai/getChengpinDetails.php"// 放后续的详细地址
}
export default base // 导出路径

// index.js

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

export default{
    getChengpin(){
        return axios.get(path.baseUrl + path.chengpin)
    }
}

第三步：

在组件中调用网络请求

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

<script>
// 导入调用的请求函数
import api from "../api/index"
export default {
  name: 'HelloWorld',
  mounted(){
    api.getChengpin().then(res => {
      console.log(res.data);
    })
  }

}
</script>