axios的二次封装

今天本来打算把自己项目的主页面写完的 但是写到一半发现不行还是必须先把接口搞定 把需要的数据引过来

于是我就打算先写api接口了 老规矩依旧用axios 

but！我看了原本的别人写的api 太太简单了 不过这个项目也比较简单已经够用了 

但我不感觉！我要写也写一个比较泛用的 

然后就去找资料看能不能跟着学 写一个自己比较满意的 

然后就懵了 

我发现他们写api的二次封装都很喜欢用TS

然后是一些名词比如

AxiosRequestConfig，

AxiosInstance

这啥啊！这下才疏学浅了！顶着头写了一段，越写越懵，完了完了，ts也就学了点皮毛 唉！没办法了还是跟我之前一样简单封装一下吧 

这个封装其实相当于没有 只为记录一下自己 哪天自己可以用TS封装出一个很完美的AXIOS之后再看我的成果！

首先先写好配置文件

export default {
    baseURL:
    {
        dev: 'https://api.pingcc.cn/',
        pro: ''
    }
}

我这里只是简短的写一下 真正的配置文件肯定肯定非常的复杂

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了

但是我这里选择换一种方式 

import axios from 'axios'
import config from "../../config";

const baseURL = process.env.NODE_ENV === 'development' ? config.baseURL.dev : config.baseURL.pro

不直接给 只是因为我们可能不止一个axios 并且我这个只是个人小项目 由其只有一个环境 哈哈哈！

但是真实的项目肯不是这样的

真实的应该是

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

如上

OK 

接下来我们拿到了url地址了 并不直接着急写我们的axios封装 

这里将其封装为一个类，而不是一个函数的原因是因为类可以创建多个实例，适用范围更广，封装性更强一些

class HttpRequest {
    constructor(baseURL) {
        this.baseURL = baseURL
    }
}

然后就是config了 

这里的config是指代信息配置项 比如请求地址和参数 请求头等等 我的并不复杂所以简短的写

    //信息配置项 特别是请求的时用
    getInsideConfig() {
        const config =
        {
            baseURL: this.baseURL,
            header: {

            }
        }
        return config
    }

真实的肯不是这样

然后的是axios拦截器

axios拦截器是一个大杀招合理的利用可以让项目的更加的完美 

    intercerptors(instance) {
        instance.interceptors.request.use(config => {
            // Do something before request is sent
            return config;
        }, error => {
            // Do something with request error
            return Promise.reject(error);
        });
        instance.interceptors.response.use(response => {
            // Do something before response is sent
            console.log(response)
            return response;
        }, error => {
            console.log(error)
            // Do something with response error
            return Promise.reject(error);
        });
    }

 我这边的需求度不高 所以只是简单配置 （全是水）

OK关键的来了 

为什么用类上面已经说了

哪里体现的用

就在下面这个方法

    request(options) {
        const instance = axios.create()
        options = { ...this.getInsideConfig(), ...options }
        this.intercerptors(instance)
        return instance(options)
    }

我们一个一个看

第一行 万众瞩目的axios终于出现了 使用axios.create生成一个新的axios 独立于之前的

第二行,options这个变量 合并了上面的方法中的 

baseURL以及传过来的实参 使用扩展运算符合并成为一个对象

第三行 调用写好的拦截器给创建的axios挂上 

第四行就是把整理好的信息传给新的axios

因为axios本质上就是接收一个对象 然后根据对象中的属性进行操作

最后 把这个类生成一个新的对象 然后把这个对象暴露出去

export default new HttpRequest(baseURL)

全部代码

import axios from 'axios'
import config from "../../config";

const baseURL = process.env.NODE_ENV === 'development' ? config.baseURL.dev : config.baseURL.pro

class HttpRequest {
    constructor(baseURL) {
        this.baseURL = baseURL
    }
    //信息配置项 特别是请求的时用
    getInsideConfig() {
        const config =
        {
            baseURL: this.baseURL,
            header: {

            }
        }
        return config
    }
    intercerptors(instance) {
        instance.interceptors.request.use(config => {
            // Do something before request is sent
            return config;
        }, error => {
            // Do something with request error
            return Promise.reject(error);
        });
        instance.interceptors.response.use(response => {
            // Do something before response is sent
            console.log(response)
            return response;
        }, error => {
            console.log(error)
            // Do something with response error
            return Promise.reject(error);
        });
    }
    request(options) {
        const instance = axios.create()
        options = { ...this.getInsideConfig(), ...options }
        this.intercerptors(instance)
        return instance(options)
    }
}
export default new HttpRequest(baseURL)

OK 

现在让我们用一段测试检验一下

import axios from "./axios";

export const homeApi = () => {
    return axios.request({
        url: '/comic/search/comicType/少年/1/17',
        method: 'get'
    })
}

第一步引入 第二步那就是使用了 我们这个只是发送一个没有参数的get请求 所以比较简单 url写是baseUrl 后面需要接上去的就好了 我一开始也没理解 因为的代码里面并没有axios.defaults.baseURL

后来我发现了这一段相当于

baseURL:'https://api.pingcc.cn/',
url: '/comic/search/comicType/少年/1/17',
method:'GET',

 也是可行的

结果

完全OK 就写到了这里了代我学好ts就封装一个完美的