Axios封装

//axios.js文件import axios from 'axios'; //引入axios模块import QS from 'qs' ;//引入qs模块用来序列化post类型的数据import store form '@/store/index' //引入vuex中的store//对于环境的切换 （开发环境，测试环境，生产环境）if(process.evn.NODE_ENV === 'development'){    axios.defaults.baseURL = 'https://www.baidu.com'}else if(process.evn.NODE_ENV === 'debug'){    axios.defaults.baseURL = 'https://www.ceshi.com';}else if(process.evn.NODE_ENV === 'product'){    axios.defaults.baseURL = 'https://www.ceshi.com';}//请求超时处理（默认不能超过10s，否则提示用户）axios.defaults.timeout = 10000;//请求头设置//请求拦截器axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//请求拦截（某些请求需要用户登录或者对post的请求序列化提交的数据，所以要进行拦截）axios.interceptors.request.use( config=>{    //先判断vuex中是否存在token    const token = store.state.token    token && (config.header,Authorization = token); //如果存在，就统一在请求头上加上token，让后台判断这个token的状态    return config//即便有token也要判断这个token是否过期，所以要在响应拦截器中对返回的状态去进行判断},error=>{    return Promise.error(error)    })//响应拦截器axios.interceptors.response.use(response=>{    response=>{      if(response.status ===200){        return Promise.resolve(response) //200指请求成功，直接获取到数据      }else{        return Promise.reject(response) //指不成功，直接抛出错误      }    }},error=>{  // 这边指的是非200状态下的情况  if(error.response.status){    switch(error.response.status){      case 401: //状态为未登陆，返回到登陆页面并携带当前页面的路径        router.replace({path:'/login',query:{redirect:router.currentRoute.fullPath}})        break;      case 403: //token过期，重新登陆        //这边可以给出一个提示，用element或者vant的提示框去提示        localStorage.removeItem('token');//清除当前的token        store.commit('loginSuccess',null);        //回到登陆页面然后将当前的路径带过去，便于等等登陆后跳转到刚刚的页面        setTimeout(()=>{          router.replace({})        },1000);        break;      case 404:        // 提示网络请求不存在（api错误）        break;      default:        // 提示    }    return Promise.reject(error.response)  }})// 封装get和post方法// url指的是api的路径，parmas指的是带的参数// getexport function get(url,params){  return new Promise((resolve,reject)=>{    axios.get(url,{      params:params    }).then(res=>{      resolve(res)    }).catch(err=>{      reject(err.data)    })  })}// postexport function post(url,params){  return new Promise((resolve,reject)=>{    axios.post(url,QS.stringify(params)).then(res=>{      resolve(res)    }).catch(err=>{      reject(err.data)    })  })}

//api.js
import { get, post } from './axios.js' //引入刚刚定义好的post和get

export const apiAddress = p => post('api/aaa/bbb/ccc', p);

//其他页面引用
import { apiAddress } from '@/request/api';// 导入我们的api接口
export default {        
    name: 'Address',    
    created () {
        this.onLoad();
    },
    methods: {            
        // 获取数据            
        onLoad() {
            // 调用api接口，并且提供了两个参数                
            apiAddress({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 获取数据成功后的其他操作
                ………………                
            })            
        }        
    }
}

此文章借鉴作者：愣锤

文章链接为：https://juejin.cn/post/6844903652881072141