vue---Axios网络请求封装

一、封装意义

封装是因为axios使用率实在是太高了，为了程序后期的可维护性，我们会把同样的东西放在一起，后期找起来会很方便，这就是封装的主要意义。在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来。

二、拦截器

拦截器最常用，因为在发送网络请求之前和获取到网络请求给我们返回的数据之前都可能需要把这个请求给拦截一下，做一些额外的处理。

拦截分为两类：①发送数据之前 ②获取数据之前

三、封装过程

1、首先需要安装axios，在终端输入：cnpm install --save axios

2、安装querystring，在终端输入：cnpm install --save querystring

3、启动程序，在终端输入：npm run serve

4、在src中创建一个文件夹叫utils，在utils中创建一个网络请求文件叫request.js 

5、当methods="post"要额外做处理，因为post参数的格式需要我们转化，这个时候就可以放到拦截器里面，日后再使用这个网络请求的时候，就不需要操心格式的问题了。

6、在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;
    }
}

//创建一个属于自己的网络请求的对象
const instance = axios.create({
    //这一块区域放置网络请求的公共配置
    timeout：5000
})

//发送数据之前
//拦截器的对象叫interceptors再通过request（发送的意思），通过use方法处理这个拦截器

instance.interceptors.request.use(
    config =>{
        if(config.methods ==="post"){
            config.data = querystring.stringify(config.data)
        }
        //config包含网络请求的所有信息
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)

//获取数据之前,response(响应对象)
instance.interceptors.response.use(
    response =>{
        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
        //状态码是200就resolve成功，如果不是则reject失败
    },
    error =>{
        const { response } = error;
        errorHandle(response.status,response.info)
    }
)
export default instance;

注：不管是哪个状态码错误，代表整个网络请求是成功的，如果是走了error代表整个网络请求在发送和接收过程中出现问题。

7、在src中创建一个文件夹叫api（api内放置的网络请求，utils中的request.js只是网络请求的方法）。

8、在api文件夹下创建path.js和index.js

9、打开path.js，输入：

const base = { //放置所有的路径
    //公共路径 
    baseUrl:"http://iwenwiki.com",
    chengpin:"/api/blueberrypai/getChengpinDetails.php"
}

//base导出
export default base;

10、打开index.js，输入：

//放置所有网络请求的方法
import axios from "../utils/request"
import path from "./path"

const api = {
    //成品详情地址,当访问这个getChengpin方法，就能拿到这个网络请求的结果了
    getChengpin(){
        return axios.get(path.baseUrl + path.chengpin)
    }
}
export default api;

11、打开HelloWorld.vue，输入：

<template>
</template>

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