zoukankan      html  css  js  c++  java
  • 在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)

    '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)
    }
    })
    }
     
  • 相关阅读:
    Operation Queue
    Dispatch Sources
    Base64编码详解
    属性存取、直接访问实例变量
    管理关联对象和NSDictionary区别
    3个Block替换Delegate的场景
    Objective-C消息机制
    Dispatch Queues调度队列
    DNS64/NAT64 Networks(解决IPv6审核被拒)
    NSObject的Initialize与Load方法
  • 原文地址:https://www.cnblogs.com/panax/p/11088474.html
Copyright © 2011-2022 走看看