安装：

cnpm i axios -S

测试：

<script>
import { mapMutations } from 'vuex';
import axios from "axios";

export default {
  created(){
    axios('/api/agreement').then(function (response) {
      console.log(response);
    })
  }
}
</script>

进行跨域处理：

在vue.config.js( 如果没有就新建 )中配置devServer

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
} 
module.exports = {
  chainWebpack: config => { // 这是对@路径的配置
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("public", resolve("public"));
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 8000,
    https: false,
    //以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域
      '/api': {
        target: 'http://demo.open.xuexiluxian.cn', //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
}

配置环境变量

1、在package.json同级目录下新建 .env.production 生产模式和 .env.development 开发模式(名字可以自己随便取这里为了简便就直接取.dev和.pro)

2、设置你在不同环境下要使用的变量；例如

NODE_ENV = production 
VUE_APP_BASE_URL="http://localhost:8080"

vue axios 响应拦截中怎么跳转 vue ajax拦截器_vue axios 响应拦截中怎么跳转


第一行的 NODE_ENV 是告诉系统这是什么环境的文文件夹

这里面其中的 VUE_APP_ 这个是项目固定写死的，不可更改，其后面的名称可以自己随便取，在这里我取的名字为 BASE_URL

3、在package.json 文件夹找到scripts 利用 --mode 来分配我们项目跑起来的指令分别对应的是生产模式开发模式

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

可以在页面中打印一下

console.log('当前环境是:',process.env.NODE_ENV)

就是根据你启动或者打包的命令获取对应的配置文件中的变量

二次封装axios

1、在 src 目录下新建 utils 目录，然后新建request.js文件；

//对axios进行二次封装
import axios from "axios"
 
//2. 利用axios对象的方法create,去创建一个axios实例
const api = axios.create({
    //基础路径
    baseURL: '/api', // 请求的公共部分,等同于 axios.defaults.baseURL = '/api'
    timeout: 3000 // 请求超时时间,这里的意思是当请求时间超过5秒还未取得结果时,提示用户请求超时
})
 
// 请求拦截处理
api.interceptors.request.use(config => {
  
    return config
}, err => {
    // 请求发生错误时的相关处理 抛出错误
    return Promise.reject(err)
})
 
 
//响应拦截处理  响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
api.interceptors.response.use(res => {
    // 请求成功返回数据
    return res
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})
 
//最后一步 暴露出去实例导出
export default api

到这一步即可使用axios，但并未对请求拦截器和响应拦截器进行什么操作

2、在src目录下新建api文件夹，用于存放不同模块的请求
如home.js：

import http from 'utils/request.js'

// 用户信息
export const agreement = ()=> {
  return http({url:'/agreement'})
}

3、调用请求

<script>
import { agreement } from 'api/home'

export default {
  async created(){
    let res = await agreement()
    console.log(res);
  }
}
</script>

至此axios就已经简单的进行了二次封装，另外我们还要根据环境变量去进行默认地址的处理；
在src目录下新建config目录，新建index.js文件写入

const CONFIG = {
  APP_URL: process.env.NODE_ENV == 'development' ? '/api' : 'process.env.BASE_URL'
}
export default CONFIG

然后修改request.js文件夹下的 baseURL

import CONFIG from '../config';

const api = axios.create({
    //基础路径
    baseURL: CONFIG.APP_URL,
    timeout: 3000 
})

添加lodaing组件

1、在utils目录下新建loading.js文件

import { Loading } from 'element-ui';
let loadingBoolean = null;
let loadingNumber = 0;

// 显示lodaing
const showLoading = ()=>{
  if( loadingNumber == 0 ){
    loadingBoolean = Loading.service({ fullscreen: true });
  }
  loadingNumber++
}

// 隐藏lodaing
import { Loading } from 'element-ui';
let loadingBoolean = null;
let loadingNumber = 0;

// 为避免在请求时使用了async/await造成多个请求的loading错乱，需要是防抖节流
// var _ = require('lodash'); // 工具库，使用防抖函数

// 显示lodaing
const showLoading = ()=>{
  if( loadingNumber == 0 ){
    loadingBoolean = Loading.service({ fullscreen: true });
  }
  loadingNumber++
}

//在一定时间内，关掉所有的loading 
// let newHideLoading = _.debounce(() => {
//   if (loadingBoolean) {
//       loadingBoolean.close()
//       loadingBoolean = null
//   }
// }, 1000)

// 隐藏lodaing
const hideLoading = ()=>{
  loadingNumber--
  if( loadingNumber == 0 ){
    // newHideLoading()
    debounce(()=>{
      if (loadingBoolean) {
        loadingBoolean.close()
        loadingBoolean = null
      }
    },2000)()
  }
}

// 防抖函数
function debounce(fun,time){
  let timer = null;
  return function (){
    clearTimeout(timer)
    timer = setTimeout(fun,time)
  }
}

export { showLoading,hideLoading }

也可以使用工具库 lodash 中防抖函数，也就是上面代码中注释掉的方式
安装：npm i --save lodash

2、在request.js文件中调用loading

import axios from "axios";
import CONFIG from '../config';
import { showLoading,hideLoading } from "./lodaing";
 
const api = axios.create({
    baseURL: CONFIG.APP_URL,
    timeout: 3000
})
 
// 请求拦截处理
api.interceptors.request.use(config => {
    if( config.loading ){ // 开启lodaing
      showLoading()
    }
    return config
}, err => {
    return Promise.reject(err)
})
api.interceptors.response.use(res => {
	// 关闭loading
    if( res.status ){
      hideLoading() 
    }
    return res
}, err => {
    Promise.reject(err)
})
export default api

请求路径 home.js 添加 loading: true

export const agreement = ()=> {
  return http({url:'/agreement', loading: true })
}

对post和get进行封装

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";
import CONFIG from '../config';
import { showLoading,hideLoading } from "./lodaing";
 
const api = axios.create({
    baseURL: CONFIG.APP_URL, 
    timeout: 3000
})
 
// 请求拦截处理
api.interceptors.request.use(config => {
    if( config.loading ){ // 开启lodaing
      showLoading()
    }
    return config
}, err => {
    // 请求发生错误时的相关处理 抛出错误
    return Promise.reject(err)
})
api.interceptors.response.use(res => {
    if( res.status ){
      hideLoading()
    }
    return res
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})

let http = {
  get:( url, params={},config={} )=>{
    return new Promise((resolve,reject) => {
      api({
        url:url,
        method:'GET',
        params:params,
        ...config
      }).then(res =>{
        resolve( res )
      }).catch(error =>{
        reject(error)
      })
    })
  },
  
  post:( url, data={},config={} )=>{
    return new Promise((resolve,reject) => {
      api({
        url,
        method:'POST',
        data,
        ...config
      }).then(res =>{
        resolve( res.data )
      }).catch(error =>{
        reject(error)
      })
    })
  },
}

//最后一步 暴露出去实例导出
export default http

在home.js中修改请求

import http from 'utils/request.js'

// 用户信息
export const agreement = ()=> {
  return http.get('/agreement', {}, { loading: true })
}