封装axios，以及获取接口时解决签名重复的问题

在获取接口时，总是提示签名重复，卡了两天，最后还是靠大神帮忙解决这个问题。

我一开始就是直接给请求头部添加签名，但没注意到这样必不会每次生成不一样的echostr，下面是错误的代码：

let access_key = 'xxx'; // 服务端生成的 access_key
let secret_key = 'xxx'; // 服务端生成的 secret_key
let headers = {
  'X-Requested-With': 'XMLHttpRequest',
  'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  'api-access-key': access_key
}

function encrypting(secret_key, echostr, timestamp) {
  return md5(secret_key + echostr + timestamp); // md5 库自行引入
}
let timestamp = Date.now() / 1000;
let echostr = randomWord(false, 8);

axios.defaults.headers['api-timestamp'] = timestamp
axios.defaults.headers['api-echostr'] = echostr
axios.defaults.headers['api-signature'] = encrypting(secret_key, echostr, timestamp)
axios.defaults.headers['Authorization'] = `Bearer ${token}`

后来大神一眼就看出问题，下图是大神修改后的代码（封装axios是从网上找的，自己改了一些，还有一些其他问题的存在，建议如果需要使用，根据需要修改）：

'use strict'

import qs from 'qs'
import md5 from 'js-md5'
import axios from "axios"
import {
  randomWord
} from './common'

window.axios = axios;

// 超时时间
window.axios.defaults.timeout = 9000;

// http request 拦截器
window.axios.interceptors.request.use(config => {
  return config;
}, err => {
  // TODO: 使用 UI 框架弹出错误
  console.error(err);
  return Promise.resolve(err);
})

// http response 拦截器  与后台提前定义正确code 错误的提示
window.axios.interceptors.response.use(
  response => {
    if (response.data.code === 0) {
      return response
    } else if (response.config.responseType === 'blob') {
      return response
    } else {
      // TODO: 使用 UI 框架弹出错误
      console.error(response.data.msg)
      return Promise.reject(response)//Promise.reject(response)
    }
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '请求错误(400)';
          break;
        case 401:
          error.message = '未授权，请重新登录(401)';
          break;
        case 403:
          error.message = '拒绝访问(403)';
          break;
        case 404:
          error.message = '请求出错(404)';
          break;
        case 408:
          error.message = '请求超时(408)';
          break;
        case 500:
          error.message = '服务器错误(500)';
          break;
        case 501:
          error.message = '服务未实现(501)';
          break;
        case 502:
          error.message = '网络错误(502)';
          break;
        case 503:
          error.message = '服务不可用(503)';
          break;
        case 504:
          error.message = '网络超时(504)';
          break;
        case 505:
          error.message = 'HTTP版本不受支持(505)';
          break;
      }
      console.log(error.response.status)
    } else {
      console.log(error)
    }
    return Promise.reject(error.response ? error.response.data : error)
  }
)

function checkStatus(response) {
  // loading
  // 如果http状态码正常，则直接返回数据
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response
    // 如果不需要除了data之外的数据，可以直接 return response.data
  }
  if (response && response.status === 401) {
    alert("登陆已过期,请重新登陆!")
  }
  // 异常状态下，把错误信息返回去
  return {
    status: 404,
    msg: '网络异常'
  }
}

function checkCode(res) {
  // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
  // debugger
  if (res.status === 404) {
    console.log(res.msg)
  }
  if (res.data && (!res.data.success)) {
    console.log("code异常",res.data.code)
  }
  return res
}

let access_key = '服务端生成的 access_key'; // 服务端生成的 access_key
let secret_key = '服务端生成的 secret_key'; // 服务端生成的 secret_key
let headers = {
  'X-Requested-With': 'XMLHttpRequest',
  'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  'api-access-key': access_key
}

function encrypting(secret_key, echostr, timestamp) {
  return md5(secret_key + echostr + timestamp); // md5 库自行引入
}



// TODO: debug

export function getDefaultHeaders() {
  let token = ''
  try {
    console.log("call mobile.getUserToken trying...")
    token = mobile.getUserToken();
    console.log("call mobile.getUserToken done ...", token)
  } catch (e) {}
  if (!token) {
    try {
      token = JSON.parse(sessionStorage.getItem("userInfo")).token;
    } catch (e) {}
  }
  if (!token) {
    try {
      token = JSON.parse(window.userInfoRaw).token;
    } catch(e) {}
  }

  let timestamp = Date.now() / 1000;
  let echostr = randomWord(false, 8);
  return Object.assign(headers, {
    'api-timestamp': timestamp,
    'api-echostr': echostr,
    'api-signature': encrypting(secret_key, echostr, timestamp),
    'Authorization': `Bearer ${token}`
  })
}

export default {
  get: (url, params) => {
    return window.axios({
      method: 'get',
      url,
      params, // get 请求时带的参数
      headers: getDefaultHeaders()
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).catch(
      (res) => {
        return checkCode(res)
      }
    )
  },

  post: (url, data, config = {}) => {
    return window.axios({
      method: 'post',
      url,
      data: qs.stringify(data),
      headers: Object.assign(getDefaultHeaders(), config.headers)
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).catch(
      (res) => {
        return checkCode(res)
      }
    )
  },

  upload: (url, data) => {
    return window.axios({
      method: 'post',
      url,
      data: data,
      headers: getDefaultHeaders()
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).catch(
      (res) => {
        return checkCode(res)
      }
    )
  },

  put: (url, params) => {
    return window.axios({
      method: 'put',
      url,
      data: qs.stringify(params),
      headers: getDefaultHeaders()
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).catch(
      (res) => {
        return checkCode(res)
      }
    )
  },

  delete: (url, params) => {
    return window.axios({
      method: 'delete',
      url,
      data: qs.stringify(params),
      headers: getDefaultHeaders()
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).catch(
      (res) => {
        return checkCode(res)
      }
    )
  }
}

使用封装方法

//API.js

import axios from 'axios'
import http from './http'

const host = '/xxx';

//获取用户信息
export function UserInfo(){
  let userInfo = window.sessionStorage.getItem('userInfo');
  try {
    userInfo = JSON.parse(userInfo);
  } catch (e) { 
    userInfo = null;
  }
    return userInfo;
}


//获取广告列表
export function GetData(options) {     //在这里用options,方便按需加参数，当然也可以固定写死参数，看自己的需求
  const url = host + "/xxx";
  return http.get(url, options)
}

//index.vue
<script>
import { FindArticle } from 'api/articleList'
export default {
  methods: {
      getData() {
         let options = {
             id:xx,
             type:xx
         }
         GetData(options).then(res => {}).catch(err=> {})
         }
      }
  }
}
</script>