标签：拦截器 return response axios reject 拦截 data 全局

拦截器介绍

在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

请求拦截器:
在请求发送前进行必要操作处理，例如添加统一token、设置请求头、参数加密等，相当于是对每个接口里相同操作的一个封装；
响应拦截器:
响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

http.js

添加一个axios的拦截器

import router from '@/config/routes'
import axios from 'axios'
import Vue from 'vue'
import {
  Message
} from 'element-ui'

axios.get('/VueApp_config.json').then(res => {
  axios.defaults.baseURL = res.data.REMOTE_ADDR
})

//response拦截器
axios.interceptors.response.use(
  function (response) {
    if (response.data.code === 0) {
      return response
    }
    if (response.data.code === -1) {
      router.replace({
        name: 'login'
      });
    }
    // 错误信息的提示框
    Message({
      type: 'error',
      message: response.data.message,
      showClose: true,
    })

    // 将未处理的异常往外抛
    // 注：如果没有return Promise.reject(response)，或者是直接return; 的话，当前请求的响应仍然会进行then中，只是它的response是undefined的。
    // 所以直接返回Promise.reject，在catch方法哪里就直接吃掉。
    return Promise.reject(response)
  },
  function (error) {
    // todo: 做一些其他日志记录处理
    Message({
      type: 'error',
      message: '服务器错误，' + error,
      showClose: true,
    })
  }
)
// request拦截器  可对请求进行相应的处理
axios.interceptors.request.use(
  function (config) {
    config.withCredentials = true
    // 默认永不超时 0为永不超时
    config.timeout = 0
    //  设置请求的token
    let val = window.sessionStorage.getItem('tokenValue')
    let key = window.sessionStorage.getItem('tokenName')
    let token = {}
    Vue.set(token, key, val)
    if (token) {
      config.headers = token
    }
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

export default {
  get: function (url, params) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
          params: params,
        })
        .then((response) => {
          resolve(response);
        })
        .catch((err) => {
          // 接受响应拦截器中Promise.reject(response)，如果不需要对错误信息进行操作可以不用返回 reject(err)
          // reject(err);
        });
    });

  },
  post: function (url, data) {
    return new Promise((resolve, reject) => {
      axios.post(url, data, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(
          (response) => {
            resolve(response);
          },
          (err) => {
            // reject(err);
          }
        );
    });
  },
  delete: function (url, data, ) {
    return new Promise((resolve, reject) => {
      axios.delete(url + '' + data)
        .then(
          (response) => {
            resolve(response);
          },
          (err) => {
            // reject(err);
          }
        );
    });
  },
  put: function (url, data) {
    return new Promise((resolve, reject) => {
      axios.put(url, data)
        .then(
          (response) => {
            resolve(response);
          },
          (err) => {
            // reject(err);
          }
        );
    });
  },

}

绑定在全局环境中

main.js

# 引入http文件
import http from './utils/http.js'
# 绑定到Vue实例上
Vue.prototype.$http = http

使用

在使用的时候就不用在进行catch，进行错误信息的提示了

this.$http
    .delete('/api/user/', id)
    .then((res) => {
        Message({
          type: 'success',
          message: '删除成功!',
        })
        this.getTable()
    })

标签：拦截器,return,response,axios,reject,拦截,data,全局
来源： https://www.cnblogs.com/purple910/p/16420691.html

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