在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式（配合axios,同时配置loading）

Posted 2022-02-13 panax

‘use strict‘

import axios from ‘axios‘
// import qs from ‘qs‘
import  Notification from ‘element-ui‘  //使用elementui的提示显示
import  Loading  from ‘element-ui‘
import router from "../router";

let loading

function startLoading() 
  loading = Loading.service(
    lock: true,
    text: ‘加载中……‘,
    background: ‘rgba(0, 0, 0, 0.2)‘,
  )


function endLoading() 
  loading.close()


let needLoadingRequestCount = 0
export function showFullScreenLoading() 
  if (needLoadingRequestCount === 0) 
    startLoading()
  
  needLoadingRequestCount++


export function tryHideFullScreenLoading() 
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) 
    // setTimeout(()=>
    endLoading()
    // ,1000)
  

axios.interceptors.request.use(config => 
  showFullScreenLoading()
  return config
, err => 
  return Promise.resolve(err)
)

axios.interceptors.response.use(response => 
  tryHideFullScreenLoading()
  if (response) 
    switch (response.data.code) 
      case 4011: //与后台约定登录失效的返回码,根据实际情况处理
        sessionStorage.removeItem(‘‘);
        sessionStorage.removeItem(‘‘);
        router.replace(
          path: ‘/‘
        )
    
  
  return response
, err => 
  return Promise.resolve(err)
)


let base = ‘‘    // 接口地址

export const postRequest = (url, params,Func,isJson) =>    //url: 接口名 ，params: 参数 ，Func: 直接取得内容data，isJson:决定取哪种格式
  request(url, params,‘post‘,Func,isJson)

export const request = (url, params,method,Func,isJson) => 
  axios(
    method: method,
    url: `$base$url`,
    data: params,
    timeout: 6000,
    // 格式的转化
    transformRequest: [function (data)      
      let ret = ‘‘
      for (let it in data) 
        if(isJson === 1 )
          ret =  data[it]
        else
          ret += encodeURIComponent(it) + ‘=‘ + encodeURIComponent(data[it]) + ‘&‘
        
      
      return ret
    ],
   
    // 请求头携带信息，类型默认为form,键值模式，传参为1
    headers: 
      ‘Content-Type‘:  isJson === 1 ? ‘application/json‘ : ‘application/x-www-form-urlencoded‘,
      ‘authorization‘: sessionStorage.getItem(‘‘),
      ‘token‘: sessionStorage.getItem(‘token‘)
    
  ).then(data=>
    if (data.data.code === 200) 
      Func(data.data.data)
    else if(data.data.code === 406)
      Notification.info(
        title: ‘错误‘,
        message: data.data.message
      )
    else if(data.data.code === 4011)
      sessionStorage.removeItem(‘‘);
      sessionStorage.removeItem(‘‘);
      // window.location.href = ‘/‘
    else if(data.data.code === 4012)
      request(‘‘,
        ‘authorization‘: sessionStorage.getItem(‘‘),
        ‘refresh_token‘: sessionStorage.getItem(‘‘)
      ,‘post‘,(res)=>
        //缓存新的token
        console.log(res)
        let token = res.token;
        sessionStorage.setItem("token", token);
        request(url, params,method,Func);
      );

    else if(data.data.code === 400 || data.data.code === 505 || data.data.code === 404|| data.data.code === 500)
      Notification.error(
        title: ‘错误‘,
        message: ‘网络异常‘
      )
    else
      Func1(data.data.code,data.data.message);
    
  )

export const uploadFileRequest = (url, params) => 
  return axios(
    method: ‘post‘,
    url: `$base$url`,
    data: params,
    headers: 
      ‘Content-Type‘: ‘multipart/form-data‘,     //上传文件的传输格式
      ‘authorization‘: sessionStorage.getItem(‘userName‘),
      ‘token‘: sessionStorage.getItem(‘token‘)
    
  )


// 方式1，
export const getRequest = (url, params,Func,isJson) => 
  request(url, params,‘get‘,Func,isJson)


// 方式2

export const getRequest = (url,params,Func) => 
  return axios(
    method: ‘get‘,
    url: `$base$url`,
    headers: 
      ‘Content-Type‘: ‘multipart/form-data‘,
      ‘authorization‘:sessionStorage.getItem(‘‘),
      ‘token‘:sessionStorage.getItem(‘token‘)
    
  ).then(data=>
    if (data.data.code === 200) 
      Func(data.data.data)
    
  )