0.使用elementui

import { Message, MessageBox } from 'element-ui'

1.引入axios

import axios from 'axios'

2.引入封装好的请求头

import { getHeader } from '@/axios/header'

3.baseUrl

let baseURL = process.env.baseURL;

4.创建axios实例

const service = axios.create({
  baseURL: baseURL, // api 的 base_url
  timeout: 30000 // 请求超时时间
})

5.request拦截器

service.interceptors.request.use(
  config => {
    // 这个是 取消重点
    //config.cancelToken = new CancelToken((cancel) => {
    //  CancelStore._axiosPromiseCancel.push(cancel);
    //});

    let url = config.url.replace(config.baseURL,'');
    let code = config.code;
    config.headers = getHeader(url, code) // 让每个请求携带自定义签名
    return config
  },
  error => {
    console.log(error) // for debug 11
    Promise.reject(error)
  }
)

6.response拦截器

service.interceptors.response.use(
  response => {

    if(response.config.responseType=='blob'){
      if(response.status==200){
        return response;
      }else{
        return Promise.reject(error);
      }
    }else{
      const res = response.data;
      if (res.code === 200) {
        return response.data

      } else if(res.code === 407){
        // console.log("Token失效跳转登陆页面");
        // sessionStorage.clear();
        // location.href="/ecloud-sp/logout";
      } else {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject('error')
      }
    }

  },
  error => {
    console.log('err' + error) // for debug

    // if (axios.isCancel(error)) {
    //   // 为了终结promise链 就是实际请求 不会走到.catch(rej=>{});这样就不会触发错误提示之类了。
    //   return new Promise(() => {});
    // } else {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
    // }

  }
)

7.暴漏出去

export default service

完整代码

import axios from 'axios'
//import CancelStore from '@/axios/store';
import { getHeader } from '@/axios/header'
import { Message, MessageBox } from 'element-ui'

let baseURL = process.env.baseURL1;
// if (process.env.NODE_ENV === "development") {
//   baseURL = process.env.baseURL;
// } else {
//   baseURL = process.env.baseURL;
// }

// axios.defaults.timeout = 30000;
// axios.defaults.retry = 1;
// axios.defaults.retryDelay = 1000;


//const CancelToken = axios.CancelToken;


// 创建axios实例
const service = axios.create({
  baseURL: baseURL, // api 的 base_url
  timeout: 30000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 这个是 取消重点
    //config.cancelToken = new CancelToken((cancel) => {
    //  CancelStore._axiosPromiseCancel.push(cancel);
    //});

    let url = config.url.replace(config.baseURL,'');
    let code = config.code;
    config.headers = getHeader(url, code) // 让每个请求携带自定义签名
    return config
  },
  error => {
    console.log(error) // for debug 11
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {

    if(response.config.responseType=='blob'){
      if(response.status==200){
        return response;
      }else{
        return Promise.reject(error);
      }
    }else{
      const res = response.data;
      if (res.code === 200) {
        return response.data

      } else if(res.code === 407){
        // console.log("Token失效跳转登陆页面");
        // sessionStorage.clear();
        // location.href="/ecloud-sp/logout";
      } else {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject('error')
      }
    }

  },
  error => {
    console.log('err' + error) // for debug

    // if (axios.isCancel(error)) {
    //   // 为了终结promise链 就是实际请求 不会走到.catch(rej=>{});这样就不会触发错误提示之类了。
    //   return new Promise(() => {});
    // } else {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
    // }

  }
)

export default service

封装接口

import request from '@/axios/requestCooperation'
export function getAdviceList(data) {
  return request({
    url: '/api/v1/resource/adviceList',
    method: 'post',
    data,
    code: "v4"
  })
}

请求头封装

import $md5 from 'js-md5'

export function getHeader(url, code) {
  let timestamp = new Date() * 1;
  let token = sessionStorage.getItem('user_token') === null? "" : sessionStorage.getItem('user_token');
  let source = 'web';
  let sign =  $md5(source + url + code + timestamp + token);
  return {'Content-Type': 'application/json; charset=UTF-8', 'token': token,'timestamp': timestamp, 'code': code, 'sign':sign, 'source':source };

}