拦截器的使用

Axios拦截器

首先创建utils文件夹
在这个文件夹里创建axios.ts

import axios,{AxiosInstance} from 'axios'
export class Interceport{
	instance:AxiosInstance;
	constructor(){
	this.instance = axios.create({
	   timeout:15000
	})
	}
	public init(){
 		this.instance.interceptors.request.use(
            (config:any)=>{
              console.log(config,"config")
               return config
            },
            (err:any)=>{
                return err
            }
        )
        this.instance.interceptors.response.use(
            (response) => {
             return response
            },
            (error) => {
              return error
            }
          );
 }
    public getInterceptor(){
 				return this.instance
 }
}

在utils文件夹创建index.ts

import { AxiosPromise,AxiosResponse } from "_axios@0.21.1@axios";

import {Interceptors} from './axios'

interface axios{
  url:string;
  method:string;
  data:Object
}
// 请求配置
export class HttpServer {
  axios: any;
  // 获取axios实例
  constructor() {
    this.axios = new Interceptors().getInterceptor()
  }
  // 简单封装一下方法
  request(config: axios): AxiosPromise {
    return new Promise((resolve, reject) => {
      this.axios(config).then((res: AxiosResponse) => {
        resolve(res);
      }).catch((err: any) => {
        reject(err)
      });
    });
  }
}

const http = new HttpServer()

export default http

使用

import http from '../../utils/index'
 const Login = function () {
            console.log(form)
            http.request({
                url: '/login',
                method: 'post',
                data: form
            }).then(res => {
                http.request({
                    url: '/roles',
                    method: 'post',
                    data: res.data.role
                }).then(res => {
                    
                    store .commit('setRightList',res.data)
                    router.push('/adminHeader')
                })
                //initDynamicRoutes()
            })

        }