Axios封装

// 封装axios

// 第一步导入

import axios, { AxiosInstance } from "axios"

// 第二步编写类

class HttpService {

    private http: AxiosInstance;

    // 新建对象的时候回触发调用这个方法,一般是赋初始值使用

    constructor() {

        this.http = axios.create({

            // 根路径

            baseURL: "",

            // 请求超时时间

            timeout: 3000,

            // headers: "

        })

        //在这里调用

        //在封装根路径完成之后,就要开始拦截了

        this.myInterceptors()

    }

    //封装一个拦截器

    private myInterceptors() {

        // 添加请求拦截器

        // this.http 是我们刚刚封装完的根路径的请求

        this.http.interceptors.request.use(function (config) {

            // 在发送请求之前做些什么

            return config;

        }, function (error) {

            // 对请求错误做些什么

            return Promise.reject(error);

        });

        // 添加响应拦截器

        this.http.interceptors.response.use(function (response) {

            // 2xx 范围内的状态码都会触发该函数。

            // 对响应数据做点什么

            return response.data;

        }, function (error) {

            // 超出 2xx 范围的状态码都会触发该函数。

            // 对响应错误做点什么

            return Promise.reject(error);

        });

    }

 

    //封装一个请求

    // 因为我们发现 axios get请求和post请求他们的数据传参不一样

    // get请求使用 parmas 传给后台值

    // post请求使用 data 传给后台值

    // 需要哪些参数

    // url  method  data传递的数据

    // 有的可以有值,或者没有值

    // url必须有值

    // 必须有值的参数要放到参数的第几个位置呀

    // 有参数在ts中就要规定类型

    // 严格的来封装的话,data:<T>

    // 是因为我也不知道你是什么类型我不能写死

    // 谁调用我,谁给我类型

    //?:可有可无

    // 后台需要参数

    private request(url: string, method: string = "get", data?: any) {

        return this.http({

            url,

            method,

            data: method == "post" ? data : '',

            params: method == "get" ? data : ''

        })

    }

    public get(url: string, data?: any) {

        return this.request(url, "get", data)

    }

    public post(url: string, data?: any) {

        return this.request(url, "post", data)

    }

}

let $http = new HttpService()

export default $http