TS封装axios

 本篇主要讲解TS中axios的两种封装和页面的使用

首先不管是哪一种方法，都要先下载 npm i axios -S

一.  HttpRequest类封装 （在TS项目里面的utils/axios.ts）

import axios from 'axios'
        class HttpRequest{
            constructor(){
                this.baseUrl=`http://localhost:3000`
            }
            getInsideConfig(){
                const config={
                    baseUrl:this.baseUrl,
                    headers:{
                        //
                    }
                }
                return config
            }
            //请求拦截
            interceptors(instance:AxiosInstance,url:string|number|underfined){
                instance.interceptors.request.use(config=>{
                    // 1. 添加全局的Loading
                    // 2. 请求头携带token
                    return config
                },(error:any)=>{
                    return Promise.reject(error)
                })
                //响应拦截
                instance.interceptors.response.use(res=>{
                    const { data } = res
                    console.log('返回数据处理',res);
                    return data
                },(error:any)=>{
                    switch(err.response.status){
                        case 400:
                            console.log('请求错误');
                            break;
                        case 401:
                            console.log('未授权,请重新登录');
                            break;
                        case 403:
                            console.log('拒绝访问');
                            break;
                        case 404:
                            console.log('请求出错');
                            break;
                        case 408:
                            console.log('请求超时');
                            break;
                        case 500:
                            console.log('服务器错误');
                            break;
                        case 502:
                            console.log('网络错误');
                            break;
                        case 503:
                            console.log('服务不可用');
                            break;
                        case 504:
                            console.log('网络超时');
                            break;
                        case 505:
                            console.log('HTTP版本不支持');
                            break;
                        default:
                            message=`连接出错(${err.response.status})!`
                    }
                    console.log('error==>',error);
                    return Promise.reject(error)
                })
            }
            request(options:AxiosRequestConfig){
                const instance=axios.create()
                options=Object.assign(this.getInsideConfig(),options)
                this.interceptors(instance,options.url)
                return instance(options)
            }
        }
        const http=new HttpRequest()
        export default http

二 : 接口方法封装 (文件api/index.ts)

import http from '../utils/axios'
        export const menuList=()=>{
            return http.request({
                url:'/users/menuList',
                method:'get'
            })
        }
        import { menuList } from '../api/index'
        getMenuList(){
            menuList().then(res=>{
                console.log(res);
            })
        }

第一种方法比第二种更加全面，一般项目中多用第一种方式封装Axios 有需要的小伙伴可以自行保存