美文网首页
封装axios响应拦截器和请求拦截器

封装axios响应拦截器和请求拦截器

作者: LinaXuanling | 来源:发表于2020-03-18 11:25 被阅读0次

首先安装axios:

npm install axios

然后创建一个文件夹apiConfig,request.js文件

import axios from 'axios';

let baseUrl = 'http://localhost:8081';

var page = this;
let service = axios.create({
  baseUrl: baseUrl,
  timeout: 20000,  // 请求超时时间
  crossDomain: true,//设置cross跨域
  withCredentials: true//设置cross跨域 并设置访问权限 允许跨域携带cookie信息
})

service.interceptors.request.use(request => {
  request.headers = {
    'Content-Type':'application/x-www-form-urlencoded'
  }
  return request;
});

service.interceptors.response.use(response =>
  new Promise((resolve, reject) => {
    switch (response.data.code) {
      case 500: if (response.data.message) {
        page.$dialog.alert({
          message: response.data.message,
        });
      } reject(response.data); break;
      case 401: reject(); break;
      default: if (response.data.code) {
        if (response.data.message) {
          page.$dialog.alert({
            message: response.data.message,
          });
        }
      } resolve(response.data);
    }
    if (response.data.status && response.data.status < 0) {
      if (response.data.message) {
        page.$dialog.alert({
          message: response.data.message,
        });
      }
      reject();
    } else {
      resolve(response.data);
    }
  }), () => {
    page.$toast({
      message: response.data.message,
    });
});

export default service;

在配置所有接口的文件,api.js:

import service from './request';

export const getprizeInfo = () => {
  return service.request({
    url: '/api/prizeInfo.json',
    method: 'get'
  })
}

export const getSudokuInfo = () => {
  return service.request({
    url: '/api/sudokuInfo.json',
    method: 'get'
  })
}

相关文章

  • axios安装与基本配置

    安装:$npm install axios --save get请求: post请求: 请求拦截器和响应拦截器

  • axios进阶之路——拦截器篇

    本课题包含三篇:基础篇;拦截器篇;封装篇。本篇为拦截器篇,主题为axios的请求拦截器、响应拦截器配置。 一、 拦...

  • axios--拦截器(1)

    关于axios的拦截器是一个作用非常大,非常好用的东西。分为请求拦截器和响应拦截器两种。 请求拦截器响应拦截器 我...

  • vue之axios篇 request拦截器的使用

    axios里面可以设置拦截器 ,可以在我们正式请求发送之前做一些事情拦截器分请求拦截器和响应拦截器首先我们看下请求...

  • vue之axios篇 拦截器

    axios里面可以设置拦截器 ,可以在我们正式请求发送之前做一些事情拦截器分请求(request)拦截器和响应(r...

  • axios拦截器

    拦截器 在请求或响应被then或catch处理前拦截它们。 // 添加请求拦截器 axios.intercepto...

  • axios使用详解

    文档 1. 拦截器 1.1 请求拦截器 基本格式 可以添加一些头部信息 1.2 响应拦截器 axios响应时,基本...

  • axios 请求拦截器&响应拦截器

    一、 拦截器介绍 一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。 请求拦截器在...

  • vue+node(express)做中间层开发二--使用axio

    axios拦截器 参考iview-admin项目所得 拦截器可以用于api请求的错误处理,包括请求拦截和响应拦截。...

  • vue的axios拦截器使用

    axios拦截器 下载并使用axios后可以对全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。...

网友评论

      本文标题:封装axios响应拦截器和请求拦截器

      本文链接:https://www.haomeiwen.com/subject/aolqyhtx.html