vue3学习（Axios网络请求封装）

Axios网络请求封装

在日常应用过程中，一个项目中的网络请求会很多，此时一般采用的方案是将网络请求封装起来。

封装方案：

在控制台安装cnpm install --save axios和cnpm install --save querystring

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

主要操作如下：

import axios from "axios"

import { config } from "process";

import querystring from "querystring"



//参考文档：https://www.kancloud.cn/yunye/axios/234845



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({//const 限制一个变量不允许被改变，产生静态作用

    //网络请求的公共配置

    timeout: 5000 //5000单位为ms,即为5s

})



//拦截器是最常用的

instance.interceptors.request.use(

    config => {

        if (config.methods = "post") {

            config.data = querystring.stringify(config.data)

        }//因为网络请求为post需要改变格式，在这里判断并改变后面就不需要对此进行操作



        //config:包含网络请求所有信息

        return config

    }//拦截器请求成功

    error => {

        return promises.reject(error)

    }//拦截器请求失败

)



instance.interceptors.response.use(

    response => {

        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)

        // == 在执行比较之前将变量值转换为相同的类型。这称为类型强制。

        // ===不执行任何类型转换（强制），并且仅当要比较的两个变量的值和类型相同时才返回true。

    }

    error => {

        const { response } = error;

        //错误的处理才是我们需要关注的

        errorHandle(response.status, response.info)

    }

)



export default instance;

封装完成，可以使用，但使用方式也有所不同。

在src文件夹下创建api文件夹，网络请求都放在api文件夹中。api文件夹中创建index.js和path.js.

Path.js中装入网络的路径。

const base={

    baseurl:"http://iwenwiki.com/",

    chengpin:"api/blueberrypai/getChengpinDetails.php"

}



export default base;//将base导出

index.js中装入所有网络的请求方法。

//所有的网络请求方法放在这里

import axios from "../utils/http";

import path from "./path";



const api={

    //诚品详情地址

    getchengpin(){

        return  axios.get(path.baseurl+path.chengpin)

    }  

}



export default api

在vue文件的<script></script>中

import axios from "axios";

import api from "../api/index"

export default {

  name: 'HelloWorld',

  mounted(){

    api.getchengpin().then(res=>{

      console.log(res.data)

    })

  }

}

即可实现网络请求。