vue2.0中axios请求配置

一、vue2.0项目中
- 1.配置
- 2.使用
二、vue2.0+ts项目中如何配置
- 1.配置
- 2.使用

一、vue2.0项目中

1.配置

javascript 复制代码

// axios.js
import axios from 'axios';
import { Message } from 'element-ui';
import router from '../../router/index.js';
//创建axios实例

const service = axios.create({
  timeout: 600000, // 请求超时时间
  withCredentials: false,
});
//请求拦截
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json';
    config.headers['aiToken'] = JSON.parse(localStorage.getItem('token'));
    config.url = process.env.VUE_APP_WEB_API + config.url;
    // get请求缓存处理
    if (config.params) {
      config.params.f_rnd = new Date().getTime();
    } else {
      config.params = {
        f_rnd: new Date().getTime(),
      };
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//响应拦截器
service.interceptors.response.use(
  response => {
    let data = response.data;
    if (response.config.isExport) {
     //配置是为了下载返回二进制文档流时候
      return response;
    }
    if (data.code === 200) {
      return data;
    } else {
      if (data.code === 1015) {
        Message({
          type: 'error',
          offset: 12,
          message: '登录/授权已经过期，请重新登录',
          duration: 5000,
        });
        router.push({ path: '/login' });
        return;
      }
      Message({
        showClose: true,
        message: data.message || data.msg,
        duration: 2000,
        type: 'error',
      });
      return Promise.reject(data);
    }
    // return data;
  },
  error => {
    console.log('error：' + error); // 用于调试
    return Promise.reject(error);
  }
);

export default service;

2.使用

javascript 复制代码

// api.js
import request from '@/assets/js/axios.js';


export function wordClould(params) {
  return request({
    url: `url`,
    method: 'get',
    params,
  });
}

export function adviserWordClould(data) {
  return request({
    url: 'url',
    method: 'post',
    data,
  });
}

二、vue2.0+ts项目中如何配置

1.配置

javascript 复制代码

// axios.ts
import axios from 'axios';
import { AxiosResponse, InternalAxiosRequestConfig, AxiosError } from 'axios';
import { Message } from 'element-ui';

const request = axios.create({
  timeout: 50000,
  withCredentials: false,
});

/**
 **********************************请求拦截
 */
request.interceptors.request.use(
  //在函数中使用名为 config 的参数，并且该参数必须符合 InternalAxiosRequestConfig<any> 这个自定义类型的定义。
  function (config: InternalAxiosRequestConfig<any>) {
    // Do something before request is sent
    if (config.headers) {
      config.headers['Authorization'] = 'token';
    }
    config.url = process.env.VUE_APP_WEB_API + config.url;
    return config;
  },
  function (error: AxiosError) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// 名为 status 的数值属性
interface responseConfig {
  // 响应结果包含status,0 是成功
  status: number;
}
/**
 ********************************** 响应拦截
 */
request.interceptors.response.use(
  function (response: AxiosResponse<responseConfig>) {
    if (response.data.status === 200) {
      return response;
    }

    Message.error('后台接口异常，请联系管理员');
    return Promise.reject(response);
  },
  function (error: AxiosError) {
    return Promise.reject(error);
  }
);

export default request;

2.使用

javascript 复制代码

// types.ts

/**
 * 任意类型的参数
 */
export interface paramsType {
  [key: string]: any;
}

javascript 复制代码

// api.ts
import request from '../utils/axios';
import { paramsType } from '../utils/types';

/**
 * 登录接口
 * @param userData
 * @returns
 */
export function ApiLogin(data: paramsType) {
  return request({
    method: 'POST',
    url: 'url',
    data,
  });
}

/**
 * 获取菜单
 * @param params
 * @returns
 */
export function APIGetMenu(params: paramsType) {
  return request({
    method: 'GET',
    url: 'url',
    params,
  });
}