本文共 3962 字，大约阅读时间需要 13 分钟。

axios拦截器

axios拦截分为请求拦截和响应拦截。

首先要安装axios，一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api文件夹。http.js文件用来封装我们的axios，api文件夹用来统一管理我们的接口url。

一、对axios进行基础配置

import axios from 'axios';  // 该处引入axios模块// 构建axios实例const instance = axios.create({
   	baseURL: process.env.BASE_API,  // 该处url会根据开发环境进行变化（开发/发布）	timeout: 10000  // 设置请求超时连接时间})

在http.js中添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。在响应拦截中，可以做一些loading动画的关闭，还有可以根据后端返回的状态码，做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装，这里我用到了async，await封装请求接口函数，这样可以将异步操作同步化操作，代码更加友好，避免回调地域的出现。

二、request请求拦截器

instance.interceptors.request.use(	config => {
   		console.log(config);  // 该处可以将config打印出来看一下，该部分将发送给后端（server端）		config.headers.token = '该处可设置token内容';		return config  // 对config处理完后返回，下一步将向后端发送请求	},	error => {
     // 当发生错误时，执行该部分代码	    console.log(error); //调试用	    return Promise.reject(error)	})

// 先导入vuex,因为我们要使用到里面的状态对象// vuex的路径根据自己的路径去写import store from '@/store/index'; // 请求拦截器service.interceptors.request.use(  config => {
       // 不传递默认开启loading    if (!config.hideloading) {
         // 请求是是否开启loading      Toast.loading({
           forbidClick: true      })    }      // 每次发送请求之前判断vuex中是否存在token                // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断     if (store.state.token) {
         config.headers.token = store.state.token;      //有些接口是 config.headers.Authorization = token    }    return config  },  error => {
       // do something with request error    console.log(error) // for debug    return Promise.reject(error)  })

三、response拦截器

instance.interceptors.response.use(	response => {
     // 该处为后端返回整个内容		const res = response.data;  // 该处可将后端数据取出，提前做一个处理		if ('正常情况') {
   			return response  // 该处将结果返回，下一步可用于前端页面渲染用		} else {
   			alert('该处异常');			return Promise.reject('error')		}	},	error => {
   		console.log(error),		return Promise.reject(error)	})

将axios实例导出，方便其他页面调用

export default instance

其他页面通过调用上述实例发送请求

import instance from '../xxx.js';  // 将实例导入const qs=require('qs');  // 用于处理前端发送数据格式const base = process.env.BASE_URL;  // 该处根据开发环境变化export const login = params => {
   	return instance.post(`${
   base}/login`, qs.stringify(params)).then(res => res.data)} 	// 该处即可实现向后端发送请求，并将数据返回给调用该接口的位置

四、api统一管理

在api文件夹里面有一个index.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，其他js则用来管理各个模块的接口。

例如下面的article.js:

/**  * article模块接口列表 */ import request from '@/network/http'; // 导入http中创建的axios实例import qs from 'qs'; // 根据需求是否导入qs模块 const article = {
           // 新闻列表        articleList () {
                  return request({
          url: '/artical',       method: 'get',       params,       hideloading: false //设置不隐藏加载loading    })      },        // 新闻详情,演示        articleDetail (id, params) {
                    return request({
   		      url: '/detail',		      method: 'get',		      params:{
   		        goodsId		      },		      hideloading: true		    })    },    // post提交        login (data) {
                 return request({
         url:'/adduser',      method:'post',      data:qs.stringify(data), //注意post提交用data参数      hideloading: true     })       }    // 其他接口…………} export default article;

index.js代码：

/**  * api接口的统一出口 */// 文章模块接口import article from '@/api/article';// 其他模块的接口…… // 导出接口export default {
           article,    // ……}

在组件中通过按需引入使用

import {
   article} from '@/api/index'created(){
      article.articleList().then(info=>{
          if(info.code==200)     this.num=info.data  }     })}

为了省去引入的步骤，方便api的调用，我们需要将其挂载到vue的原型上。在main.js中

import Vue from 'vue'import App from './App'import router from './router' // 导入路由文件import store from './store' // 导入vuex文件import api from './api' // 导入api接口 Vue.prototype.$api = api; // 将api挂载到vue的原型上复制代码

然后我们在组件中可以这么用

//无需导入methods: {
           onLoad(id) {
                 this.$api.article.articleDetail(id, {
                       api: 123              }).then(res=> {
               // 执行某些操作              })        }  }

转载地址：https://blog.csdn.net/Zgtby/article/details/117463835 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！