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

首先安装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'
  })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容