axios响应拦截获取config axios响应拦截器状态码

前言

Axios 相信对有过Vue开发经验的码农们肯定不陌生，自从Vue2推出之后，官方及尤大佬都推荐使用axios来进行网络请求，但是你以为只是简单引入使用就完了吗，看完对Axios的二次封装别千万吓到你。

---

准备工作：编译器的选择可以加速代码的开发，这里我们推荐使用 HBuilderX

一、在vue项目中配置Axios

1.下载依赖

代码如下：

npm i axios -S
npm i qs -S // 序列化数据 可以将数据转化为 url参数形式

在这里说明一下：如果只下载axios 会导致数据传输请求的时候无法正常获取数据，需要配合qs进行数据请求，许多铁汁都会在这里踩坑，希望不要被误导。

2.main.js 全局引入

import Axios from "axios"
Vue.prototype.$axios = Axios
import  qs from 'qs'
Vue.prototype.$qs = qs

二、在vue项目中配置Axios

1.封装前与封装后的对比

封装前

axios('http://localhost:9528/data', {
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...
})
.then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
  if (err.response.status === 401) {
  // handle authorization error
  }
  // 其他错误处理.....
  console.log(err);
});

这样看其实还好，如果在业务需求中需要同时请求多个请求，那么这样的请求方式是不是就显得特别的复杂，密密麻麻，画面感立马就显现出来了。

封装后

getList(page,limit,form).then((res)=>{
// todo: 真正业务逻辑代码
  console.log(res);
}).catch((res)=>{
// 其他错误处理.....
  console.log(res);
})

经过封装后代码量直接性的缩短70%，看着是不是很爽呢。

三、封装的实现

1.拦截器以及状态码

拦截器 顾名思义所有发出接受的请求都要通过拦截器的检查，这样接口可以统一管理是不是增大了项目的优化效果呢。

在根目录（src）下创建utils目录，并在此目录下创建request.js

作为公共js，首先我们需要引入几个需要的依赖

// 引入依赖
import axios from 'axios'
import { Message, MessageBox, Notification  } from 'element-ui'

// 创建axios实例 实现axios的封装
const service = axios.create({
  baseURL:'http://localhost:9528:8080',
  // timeout: 10000 ,// 请求超时时间 超时将会自动断开请求
})

// 携带请求头参数，在实例开发中，后端需要识别token 平台识别码及版本号等
service.interceptors.request.use(
  config => {
    if (store.getters) {
      config.headers['X-App-Token'] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
      config.headers['X-App-Platform']='sys';
      config.headers['X-App-Version']='1.2.0';
    }
	
    return config
  },
  error => {
    Promise.reject(error);
  },
)
// response 拦截器 这是作为请求发出后收到请求时对后端返回的数据就行处理
service.interceptors.response.use(

  response => {
    /**
     * code是后端返回的标识，未非0是成功 1是抛错 可结合自己业务进行修改
     */
   const res = response.data
    if(res.code==0){
    // 如果后端返回的code符合标准讲把数据返回到实例中，否则实例讲不接受返回
     return response.data
  	}else{
  	//可以根据具体返回code值处理
  	}
  },
  error => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

2.接口API管理

在根目录（src）下创建api目录，并在此目录下创建自定义的.js文件

import request from '@/utils/request'

// 命名接口方法 便于识别
export function getList(page,limit，form) {
  return request({
  //接口地址
    url: '/xxx/xxx/xxx',
    method: 'post',
    //data里就可以根据后端提供对应的参数进行赋值请求
    data:{
		page:page,
		limit:limit,
		day:form.week
	},
	headers: {
	'Content-Type': 'application/json'
	}
  })
}

将所有用到接口，都放到一个篮子或者多个js文件里，是不是可以大大增加接口的集中管理呢，请给接口一个家。

2.接口调用及Loading

拦截器也做好了 接口也管理好了 剩下的就是在vue页面中的应用调用了

<script>
//在vue页面中引入需要调用的接口  需要哪个引入那个  
	import{getList} from '@/api/order_list'
	export default{
		
		methods:{
		//引入接口后  即可在方法里调用， 是不是更方便了呢
			fetchData(){
				this.listLoading = true;
				getList(this.page,this.limit,this.formInline).then((res)=>{
				//调用成功后的回调应用
					this.listLoading = false
				}).catch((res)=>{
					this.listLoading = false
				})
			}
		},
	}
</script>

---