011 Axios网络请求封装

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

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

　　

 

所有安装包都在这个package.json里面可以查看。

在src文件中创建utils文件夹（网络请求的方法），在utils文件夹中在或者创建一个网络请求，可以叫request.js（或者http.js）

 

 在src中在创建api文件夹（网络请求一般都集中放到这里），在新建path.js文件和indes.js文件

 

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

    timeout: 5000

})

instance.interceptors.request.use(

    config => {

        if (config.method === "post") {

            config.data = qs.stringify(config.data)

        }

        return config;

    },

    error => Promise.reject(error)

)

instance.interceptors.response.use(

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

    error => {

        const { response } = error;

　　errorHandle(response.status, response.info)

　　}

　　)

　　export default instance;

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