vue中axios的全局配置和自定义配置axios实例

---

前言

本文主要讨论vue项目中axios的全局配置和自定义配置axios实例。涉及到的内容有：Vue、axios、Element-ui组件库。如果还对axios不了解的，详细可参考axios官方文档

axios官方文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装相关插件模块

安装axios：

npm install axios;

安装qs：

• 主要用作序列化对象，详细可参考另一个博客（数据序列化处理）

npm install qs

安装element：

• 详细步骤请移步官方文档 Element-ui

二、axios的全局配置

1、创建文件

• src目录下创建network文件夹，在该文件夹下创建axios_config.js文件
• 文件位置、命名也可以自己定义

2、导入配置文件

在mian.js文件中导入配置文件

import './network/axios_config'

3、编写配置文件

提示：以下文件配置内容为基础内容可供参考，自己可根据需求添加内容。

import axios from 'axios'
import store from '../store'
//单独引入element的Message组件，以使用
import { Message } from 'element-ui'

//配置基础url、超时时间、post请求头
axios.defaults.baseURL = 'http://xxx.xx.xx.xxx:xxxx';
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//------------------请求拦截-------------------//
//------------在发送请求之前做些什么------------//
axios.interceptors.request.use(config => {
    //例：若存在token则带token
    const token = store.state.token;
    if (token) {
        config.headers.Authorization = token
    }
    return config;
}, err => {
    console.log("请求拦截=>", err);
    return err;
})

//------------------响应拦截-------------------//
//-------------对响应数据做点什么-------------//
axios.interceptors.response.use(res => {
    console.log("响应拦截=>", res.data);
    //例：后端数据处理错误，并返回错误原因；前端获取错误原因并展示
    if (res.data.success == false) {
        Message({
            message: res.data.data.message + '，请重试！',
            type: 'warning'
        });
    }
    return res ? res.data : res;
}, err => {
    console.log(err);
    //打印完整的错误信息
    console.log("响应拦截错误完整信息=>",err.response)
    //也可以在这里对不同的错误码做不同的展示处理
    throw err;
})

三、创建配置axios实例

当我们一个项目需要访问多个服务地址，而这些服务请求和响应的结构都完全不同，那么就要创建多个axios实例并做相关配置来满足不同的需求

1、创建文件

• src目录下创建network文件夹，在该文件夹下创建request.js文件
• 文件位置、命名也可以自己定义
  

3、编写axios实例配置文件

提示：内容可供参考

import axios from 'axios';
import qs from 'qs';
import { Message } from 'element-ui'

//导出request方法，供其它地方使用
export function request(config) {
    const instance = axios.create({
        baseURL: 'http://xxx.xx.xx.xxx:xxxx',
        timeout: 5000,
        // 'transformRequest' 允许在向服务器发送前，修改请求数据
        transformRequest: [function (data) {
            // 对 data 做序列化处理
            return qs.stringify(data);
        }],
    })

    instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

    //------------------请求拦截-------------------//
    //------------在发送请求之前做些什么------------//
    instance.interceptors.request.use(config => {
        // 若存在token则带token
        const token = window.localStorage.getItem('token');
        if (token) {
            config.headers.Authorization =token;
        }
        // 放行
        return config;
    }, err => {
        console.log("请求拦截=>", err);
        return err;
    })

    //------------------响应拦截-------------------//
    //-------------对响应数据做点什么-------------//
    instance.interceptors.response.use(res => {
        //例：后端数据处理错误，并返回错误原因；前端获取错误原因并展示
        console.log("响应拦截=>", res.data);
        if (res.data.success==false) {
            Message({
                message: res.data.data.message+'，请重试！',
                type: 'warning'
            });
        }
        return res ? res.data : res;
    }, err => {
        console.log(err);
        console.log("响应拦截错误完整信息=>",err.response)
        //也可以在这里对不同的错误码做不同的展示处理
        throw err;
    })

    return instance(config);
}

4、使用创建的axios实例

第一步：编写需要的请求函数

举个例子：编写登录接口函数

创建文件

写接口函数内容

//导入创建好的axios实例
import { request } from './request';

//导出login方法，供其它地方使用
export function login(data) {
    return request({
        url: '/user/login',
        method: 'post',
        data,
    })
}

第二步：在vue页面导入并使用接口函数

<script>
//导入编写好的login方法
import {login} from '../network/login'

export default {
  name: 'Home',
  data() {
    return {
      user:{
        account :1,
        password:1,
      }
    }
  },
  methods: {
  	send() {
      login(this.user).then(res=>{
        //请求成功，做相应处理
      }).catch(err=>{
        //请求失败，做相应处理
      })
  },
}
</script>

---

提示：文章到此结束，本文仅为个人看法，若有不足欢迎各位指出。