Guoguo-notes
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
  • 常用笔记

    • 1. CSS笔记.md
    • 2. Echarts.md
    • 3. Git 代码管理.md
    • 4. Html 笔记.md
    • 5. TypeScript.md
    • 6. axios 请求拦截.md
    • 7. js常规.md
    • 8. npm.md
    • 9. sh 笔记.md
    • 10. valibot校验学习.md
    • 11. 云开发教程.md
    • 12. 公共API接口.md
    • 13. 小程序笔记.md
    • 14. 插件库.md
    • 15. 服务器.md
    • 16. 服务器部署教学.md
    • 17. 浏览器px to rem适配.md
    • 18. 登录逻辑.md
    • 19. 网站配色.md
    • 20. 跨域代理.md
import axios from "axios";
// 创建实例
const Service = axios.create({
    timeout: 8000,
    baseURL: 'http://xxx.com',
    headers: {
        "content-type": "application/json;charset:utf-8"
    }
})


// 请求拦截
Service.interceptors.request.use((config) => {
    //启动  加载中的   样式
    return config
}, () => {

})

//响应拦截
Service.interceptors.response.use(response => {
     //清除加载中的样式
    return response
},err=>{
    //清除加载中的样式
})


// 暴露实例
export default Service

request.js

(function (win) {
  axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
  // 创建axios实例
  const service = axios.create({
    // axios中请求配置有baseURL选项,表示请求URL公共部分
    baseURL: '/',
    // 超时
    timeout: 10000000
  })
  // request拦截器
  service.interceptors.request.use(config => {
    // 是否需要设置 token
    // const isToken = (config.headers || {}).isToken === false
    // if (getToken() && !isToken) {
    //   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    // }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
      let url = config.url + '?';
      for (const propName of Object.keys(config.params)) {
        const value = config.params[propName];
        var part = encodeURIComponent(propName) + "=";
        if (value !== null && typeof(value) !== "undefined") {
          if (typeof value === 'object') {
            for (const key of Object.keys(value)) {
              let params = propName + '[' + key + ']';
              var subPart = encodeURIComponent(params) + "=";
              url += subPart + encodeURIComponent(value[key]) + "&";
            }
          } else {
            url += part + encodeURIComponent(value) + "&";
          }
        }
      }
      url = url.slice(0, -1);
      config.params = {};
      config.url = url;
    }
    return config
  }, error => {
      console.log(error)
      Promise.reject(error)
  })

  // 响应拦截器
  service.interceptors.response.use(res => {
      if (res.data.code === 0 && res.data.msg === 'NOTLOGIN') {// 返回登录页面
        console.log('---/backend/page/login/login.html---')
        localStorage.removeItem('userInfo')
        window.top.location.href = '/backend/page/login/login.html'
      } else {
        return res.data
      }
    },
    error => {
      console.log('err' + error)
      let { message } = error;
      if (message == "Network Error") {
        message = "后端接口连接异常";
      }
      else if (message.includes("timeout")) {
        message = "系统接口请求超时";
      }
      else if (message.includes("Request failed with status code")) {
        message = "系统接口" + message.substr(message.length - 3) + "异常";
      }
      window.ELEMENT.Message({
        message: message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(error)
    }
  )
  win.$axios = service
})(window);

Edit this page
Last Updated:
Contributors: 袁果锅
Prev
5. TypeScript.md
Next
7. js常规.md