前端网络请求拦截器应用

jQuery

1. 请求拦截器

$.ajaxPrefilter('json', function(options) {
    options.success = function(response) {
      // do something
    };
  });

2. 响应拦截器

$.ajaxTransport('json', function(options) {
    return {
        send: function(_headers, completeCallback) {
          completeCallback(200, 'success', {
            json: response // you can return mock data
          });
        },
        abort: function() {
          console.log('取消请求');
        }
    };
  });

ajaxTransport
ajaxPrefilter

axios

1. 创建实例

const defaultHttp = axios.create({
  baseURL: url, // server
  timeout: 20000,
  async adapter(config) {
    const { url, method, params } = config;
    if (method && method.toLowerCase() === 'get') {
      // here, you can handle cache
      const cachedResponse = localStorage.get(req);

      if (cachedResponse) {
        return {
          data: {
            code: 0,
            data: cachedResponse,
          },
          status: 200,
          statusText: 'ok',
          headers: '',
          config,
        };
      }
    }

    if (axios.defaults.adapter) {
      return axios.defaults.adapter(config);
    }
    return Promise.reject(/* error message */);
  },
});

2. 请求拦截器

defaultHttp.interceptors.request.use(
  config => config,
  error => {
    // handle request error
    return Promise.reject(error);
  },
);

3. 响应拦截器

defaultHttp.interceptors.response.use(
  response => {
    const { data: respData, config } = response;
    const { code, msg, data } = respData as ApiBase;
    const { url, method, params } = config;

    switch (+code) {
      case 0:
        // do something
        break;
      default:
          break;
       
    }
  },
  error => {
    // handle response error
    return Promise.reject(/*error*/);
  },
);

说明
typescript中使用axios,version>0.19

axios

httpClient[angular]

@Injectable()
export class DefaultInterceptor implements HttpInterceptor {
  protected baseUrl = environment.serverUrl;
  constructor(/* inject deps */) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): any {
    // handle request,you can manage request params
    // do something

    return next.handle(fullReq).pipe(
      mergeMap((event: any) => {
        if (event instanceof HttpResponse) {
          // response data handle 
          const body: ApiRespone = event.body;
          const { status, errorCode } = body;
          if (status !== 0) {
            // do something
            return throwError(errorCode);
          }
          return of(
            new HttpResponse(Object.assign(event, { body: body.data })),
          );
        }
        return of(event);
      }),
      catchError((err: string | HttpErrorResponse | TimeoutError) => {
        if (typeof err === "string") {
          // do something
        }
        if (err instanceof HttpErrorResponse) {
          // do something
        }
        if (err instanceof TimeoutError) {
          // do something
        }
        return throwError(err);
      }),
    );
  }
}

http