angular-cli中axios请求拦截、响应拦截的配置

第一步：

npm 安装axios，文件根目录下安装，指令如下

npm install axios --save  //安装到生产环境

第二步：

配置 $\color{red}{config.js }$ 文件，它是整个项目的统一配置文件，方便我们管理项目
在angular-cli项目的 $\color{red}{src/ }$ 文件夹下新建一个文件夹为 $\color{red}{plugins }$ ，然后在 plugins/ 下新建 config.js 文件，写入如下代码

// 测试域名
// const testDomin = '' // 使用代理
const testDomin = 'http://172.20.1.26:8082'
// const testDomin = 'http://172.20.1.148:8082'
 
// 正式域名
const formalDomain = 'http://39.96.91.52/back'
 
// 环境变量
const env = process.env.NODE_ENV
const origin = env === 'development' ? testDomin : formalDomain
 
// config
const config = {
  // 版本号
  version: '0.1.1',
 
  // 域名
  domain: origin,
 
}
 
/**
 * 假日表
 * @param [month, day, type, name] type : 1 公历 2 农历
 */
 
const legalHoliday = [
  ['01', '01', 1, '元旦'],
  ['01', '01', 2, '春节'],
  ['04', '05', 1, '清明节'],
  ['05', '01', 1, '劳动节'],
  ['05', '05', 2, '端午节'],
  ['08', '15', 2, '中秋节'],
  ['10', '01', 1, '国庆节']
]
 
// 数据字典分类
const dicCode = {
  goodsCategory: '1001', // 商品分类
  Brand: '1002', // 品牌
  category: '1003', // 类别
  doorType: '1004', // 门架种类
  tonnage: '1005' // 吨位
}
 
export {
  config,
  legalHoliday,
  dicCode
}

第三步：

如何封装插件
首先，在angular-cli项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 axios.js文件，写入如下代码

import axios from 'axios'
import { config } from './config'
 
// 定义加载动画
// let loading = null
// let loadingShow = false
 
// axios.defaults.baseURL = 'http://172.20.1.148:8082'
 
// 添加请求拦截器
axios.interceptors.request.use(
  conf => {
    // 配置axios请求的url  ${config.ajaxUrl} 是配置的请求url统一前缀，配置好就不用重复写一样的url前缀了，只写后面不同的就可以了
    conf.url = `${config.domain}${conf.url}`
 
    // 显示加载动画
    // if (!loadingShow) {
    //   loadingShow = true
    //   loading = message.loading('数据加载中...', 0)
    // }
 
    // 设置 token 判断是否存在token，如果存在的话，则每个http header都加上token
    // if (sessionStorage.getItem('auth')) {
    //   conf.headers['Authorize'] = sessionStorage.getItem('auth')
    // }
 
    return conf
  },
  error => {
    // 抛出请求错误信息
    Promise.reject(error.response)
  }
)
 
// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 请求失败处理
    return Promise.reject(error)
  }
)
 
export default axios

第四步：

在组件中使用axios

image.png

import { Component, OnInit } from '@angular/core'
// 引入 Router
import {
  ActivatedRoute,
  Router,
  ActivatedRouteSnapshot,
  RouterState,
  RouterStateSnapshot
} from '@angular/router'
 
import axios from '../../plugins/axios'
 
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
  // 注册 Router
  constructor(public router: Router) {}
 
  ngOnInit() {
    this.allList()
  }
 
  allList() {
    axios.get(`/back/common/getVerifyCode`).then(res => {})
  }
}

第五步：

重启项目，查看效果