标签：axios 封装 ts instance import config options const

1.封装请求

//存放请求路径的文件
import urlConfig from '../api/index'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import router from '@/router';
class Request {
    private baseUrl: string = urlConfig.Base_URL

    private request(opts: {}) {
        const instance: AxiosInstance = axios.create({
            baseURL: this.baseUrl,
            timeout: 3000
        })
        this.setInterceptors(instance)
        return instance(opts)
    }
    //拦截器
    private setInterceptors(instance: AxiosInstance) {
        //请求拦截器
        instance.interceptors.request.use((config) => {

            const token = localStorage.getItem('token')
            if (token && config.headers) {
                config.headers['Authorization'] = token;
            }
            return config
        })
        //响应拦截器
        instance.interceptors.response.use((res: AxiosResponse) => {
            if (res.status == 200) {
                return Promise.resolve(res.data)
            } else {
                return Promise.reject(res.data)
            }
        }, err => {
            switch (err.response.status) {
                case 401:
                    const instance = ElMessage.error('用户信息过期，请重新登录');
                    setTimeout(() => {
                        instance.close();
                        router.push('/login');
                    }, 1000);
                    break;
                default:
                    console.warn(`status= ${status}`);
                    break;
            }
            return Promise.reject(err);
        })
    }
//封装get请求
    public get(url: string, options?: AxiosRequestConfig) {
        return this.request({
            url: url,
            method: 'get',
            params: options
        })
    }
//封装post请求
    public post(url: string, options: AxiosRequestConfig) {
        return this.request({
            url: url,
            method: 'post',
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
            },
            data: options
        })
    }
}
export const httpRequest = new Request()

2.请求使用案例

将请求封装成函数

import { httpRequest as axios } from '../untils/request'
//接口地址 ‘/api/test’
import config from './config/user'
export const login: Function = (options: {}) => axios.post(config.loginApi, options)
export const test:Function = (options:{}|undefined)=>axios.get(config.test,options)

导入接口

import { login } from '../api/user'
async function loginClick() {
    let data = new FormData()
    data.append('username', account.value)
    data.append('password', password.value)
    const response = await login(data)
    console.log('response :>> ', response);
    if(response.status==0){
        localStorage.setItem('token',response.token)
        router.push('/home')
    }
}

标签：axios,封装,ts,instance,import,config,options,const
来源： https://www.cnblogs.com/cstd/p/16583873.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。