vue axios 拦截器配置与封装

一、安装

1、 利用npm安装npm install axios --save

--save：安装在生产环境

二、例子

要想统一处理所有http请求和响应，就得用上 axios 的拦截器。

axios.js

import axios from 'axios'
// @ == src
import baseUrl from '@/config'

/*
* 增加请求拦截器
*/
axios.interceptors.request.use((config) => {
  // 预处理请求的信息
  return config
}, (error) => {
  // 预处理请求有异常error时抛出错误
  return Promise.reject(error)
})

/*
* 增加相应拦截器
*/
axios.interceptors.response.use((response) => {
  // 预处理相应的数据
  return response
}, (error) => {
  // 错误返回 状态码验证
  return Promise.reject(error)
})

/**
 * 返回axios方法
 * @param url（如果传绝对地址则baseURL不会追加到url之前）
 * @param method
 * @param timeout
 * @param data
 * @param headers
 * @param dataType
 * @returns {AxiosPromise}
 */
export default function (url, {
  // 默认求情方式post
  method = 'post',
  // 超时
  timeout = 10000,
  // 请求主题
  data = {},
  // 请求头
  headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8;'},
  // 文件类型
  dataType = 'json'
}) {
  // 可根据不同method动态配置headers
  if (method === 'get') {
    headers = Object.assign({}, headers)
  } else {
    headers = Object.assign({}, headers)
  }
  const config = {
    method: method,
    timeout: timeout,
    url: url,
    // 在外部文件配置axios的基础路径 ip地址
    baseURL: baseUrl.URL_EASYMOCK,
    data: data,
    headers: headers,
    dataType: dataType
  }
  return axios(config)
}

config.js

配置请求的ip端口号地址

// baseUrl

const DOMAIN_NAME = {
// ip:端口号
  URL_EASYMOCK: 'http://localhost:3030'
}

export default DOMAIN_NAME

api.js

所有的请求都写在一个对象中，方便调用

import axios from './axios'
const requests = {
  getUser (data = {}) {
                // user 请求接口
    return axios('user', {
      // 请求方法
      method: 'get',
      // 请求体
      data: data
    })
  }
}
// 导出对象，然后在全局注册或在单个vue文件下调用
export default requests

api.vue

调用api.js中的方法

<template>
  <div class="api">    
  </div>
</template>

<script>
// 在文件中调用
  import axios from '@/server/api';
  export default{
    data() {
      return {
        msg: 'hello vue'
      }
    },
    methods: {
      /**
       * 接口请求
       */
      getUser() {
        // axios 本省就是prmoise分装的
        axios.getUser().then((res) => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        })
      }
    }
  }
</script>

<style scoped>
</style>

在main.js中声明使用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入请求数据的对象
import axios from '@/server/api'

Vue.config.productionTip = false
// 全局声明
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

app.vue请求改成,不用再每个vue文件中引入 

 import axios from '@/server/api';

/**
       * 接口请求
       */
      getUser() {
        // axios 本省就是prmoise分装的
        axios.getUser().then((res) => {
          console.log(res);
        }).catch((err) => {
          console.log(err);
        })
      }