标签：axios return data 用法 拦截器 error config response

之前在开发后台管理系统时，都是跟其他同事一起开发，说实在点，就是在别人开发的基础上写页面。。。

现在想把之前没有关注的点拾起来。。

今天看下axios拦截器的用法

用vue写代码在做ajax请求时，可以用到axios，具体就相当于请求前进行校验(拦截)和响应前进行校验(拦截).

什么是axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

它本身具有以下特征：

1. .从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止CSRF/XSRF

axios官网地址：https://www.npmjs.com/package/axios

npm安装方法：

$ npm install axios

axios用法

1.在src目录下创建一个js文件并引入axios

import axios from 'axios'; //引入axios
//下面的两个不一定要引入，看项目在拦截时需要做什么操作，一般都是需要引入store的，因为可以拿到用户的登录信息
import store from '@/store/index';//引入store
import router from '@/router';//引入router

2.创建一个axios实例

let instance = axios.create({
	headers:{
		'content-type':'application/x-www-form-urlencoded'
	}
})

3.编写请求拦截器

这个拦截器会在你发送请求之前运行，此处请求拦截器的功能是：每次请求前去判断是否有token，如果token存在则在请求头加上这个token,后台会判断这个token是否过期。

// http request拦截器
instance.interceptors.request.use(
	config=>{
		const token = localStorage.getItem('token');//此处用这个localStorage 也可以用store，因为一般登录后都会将登录信息存储到vuex中，但是如果不存储到localsStorage的话，当前页面刷新时，vuex中的内容会消失。
		if(token){
			config.headers.authorization = token //请求头加上token
		}
		return config
	},err=>{
		return Promise.reject(err);
	}
)

4.编写响应拦截器

这个拦截器会在拿到后台接口返回的数据后，进行响应处理。比如数据正确返回是code是200，如果code是500,则需要拦截一下。

instance.interceptors.response.use(
	response = {
		//拦截响应，做统一处理
		if(response.data.code){
			switch(response.data.code){
				case 1002:
				store.state.isLogin = false;//store中有个isLogin表示登录状态，这个视具体情况而定
				router.replace({
					path:'login',
					query:{
						redirect:router.currentRoute.fullPath	
					}
				})	
			}
		}
		return response
	},
	//接口错误状态处理，也就是说无响应时的处理
	error =>{
		return Promise.reject(error.response.status);//接口返回的错误信息
	}
)

5.导出实例

export default instance

6.axios的使用

在接口对应的js文件中，使用axios,比如login.js登录相关的接口

import axios from './axios'
/* 验证登录 */
export function handleLogin(data){
	return axios.post('/user/login',data)
}

在登录页面就可以直接引入login.js，然后使用handleLogin即可。

<script>
import loginApi from '@/api/login.js'
export default{
	data(){},
	created(){
		loginApi({xxx}).then(res=>{
			console.log(res);	
		}).catch(err=>{
			console.log(err);	
		})
	}
}
</script>

下面附录一个我第一份vue前端工作时，大神的代码：

import axios from 'axios';
import router from '@/router/routers';
import {Notification,MessageBox,Loading} from 'element-ui';
import store from '../store'
import {getToken} from '@/utils/auth'
import Config from '@/setting'
var qs = require('qs')//qs主要是用于处理formData的数据

//创建 axios实例
const service = axios.create({
	baseURL:process.env.NODE_ENV ==='production'?process.env.VUE_APP_BASE_API:'/',//api的base_url
	timeout:Config.timeout //请求时间
})
let loadingInstance
//request拦截器
service.interceptors.request.use(
	config=>{
		if(getToken()){
			config.headers['Authorization'] = getToken() //让每个请求携带自定义的token，请根据实际情况自行修改
		}
		config.headers['Content-Type'] = 'application/json'
		//这个headers头部的Content-Type：一般都是application/json,但是也有部分接口需要传递的是formData格式的，此时就需要用到qs，为了做区分，在config参数中添加一个type变量来进行判断处理
		if(config.type && config.type == 'form'){
			config.headers['Content-Type'] =  'application/x-www-form-urlencoded'
			if(config.data){
				config.data = qs.stringify(config.data);	
			}
		}
		if(config.loading){
			loadingInstance = Loading.service({fullscreen:true})	
		}
		return config
	},
	error =>{
		console.log(error);
		Promise.reject(error);	
	}
)
//response拦截器
service.interceptors.response.use(
	response =>{
		const code = response.status
		if(code<200 ||code>300){
			Notification.error({
				title:response.message	
			})
			if(loadingInstance){
				loadingInstance.close();
			}
			return Promise.reject('error')
		}else{
			if(loadingInstance){
				loadingInstance.close();
			}
			return response.data
		}
	},
	error =>{
		let code = 0
		try{
			code = error.response.data.status
		}catch(e){
			if(error.toString().indexOf('Error:timeout') !==-1){
				Notification.error({
					title:"网络请求超时",
					duration:5000
				})
				return Promise.reject(error)
			}
		}
		if(code){
			if(code==401){
				MessageBox.confirm(
					'登录状态已过期，您可以继续留在该页面，或者重新登录',
					'系统提示',
					{
						confirmButtonText:'重新登录'，
						cancelButtonText:'取消',
						type:'warning'
					}	
				).then(()=>{
					store.dispatch('Login').then(()=>{
						location.reload();//为了重新实例化vue-router对象
					})
				})
			}else if(code==405){
				router.push({path:'/401'})
			}else{
				const errorMsg = error.response.data.message
				if(errorMsg !== undefined){
					Notification.error({
						title:errorMsg,
						duration:5000
					})
				}
			}
		}else{
			Notification.error({
				title:'接口请求失败',
				duration:5000
			})
		}
		return Promise.reject(error)
	}
)
export default service

接口文件的内容：

import request from '@/utils/request'

//get请求的写法：
export function getShopList(data, loading) {
  // eslint-disable-next-line no-return-assign
  return get('api/shop/list', data, loading)
}
//post请求的写法：
export function modifyAdmin(data) {
  return request({
    url: 'api/shop/modify/admin',
    method: 'post',
    data
  })
}
//formData格式的post请求的写法：
export function verify(data) {
  return request({
    type: 'form',
    url: 'api/shop/verify',
    method: 'post',
    data
  })
}

vue页面中使用接口的部分内容：

import { verify } from '@/api/shop'

...
methods:{
	verify(this.verifyObj).then(res => {
	  ....
	}).catch(error => {
	  ...
	})
}

标签：axios,return,data,用法,拦截器,error,config,response
来源： https://blog.csdn.net/yehaocheng520/article/details/118379856

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。