Vue 简单的axios封装

记录一下在Vue项目中简单封装axios的操作

目录结构

 

安装axios

起手安装axios
npm install axios

 

request.js

该文件中对axios进行封装

import axios from 'axios'

const baseURL = 'http://localhost:4000/api'
// 创建 axios 实例
const service = axios.create({
    baseURL: baseURL, // 请求地址前缀，将自动加在 url 前面
    timeout: 6000 // 请求超时时间
})

// axios请求拦截器
service.interceptors.request.use(config => {
    if (localStorage.getItem('loginToken')) {
        // 请求统一设置header
        config.headers.Authorization = localStorage.getItem('loginToken')
    }
    return config
}, error => {
    return Promise.reject(error)
})

// axios响应拦截器
service.interceptors.response.use(response => {
    return response.data
}, error => {
    // console.log('看一看', error.response)
    const { status } = error.response
    if (status === 401) { // token失效
        Message.error('token失效，请重新登录')
        // 清除token
        localStorage.removeItem('loginToken')
        router.push('/')
    }
    return Promise.reject(error)
})

export { service as axios }

在axios.create操作中还可以进行其他的一些操作，诸如：

1. 根据当前环境切换不同的url（生产环境/开发环境/测试环境）

baseURL: process.env.NODE_ENV === 'production' ? 'productApi': 'developApi'

2. 统一请求头配置

headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },

3. 跨域、响应码处理
   提供是否允许跨域的属性——withCredentials: true/false
   请求响应序列化

// 在向服务器发送请求前，序列化请求数据
    transformRequest: [function (data) {
        data = JSON.stringify(data)
        return data
    }],
    // 在传递给 then/catch 前，修改响应数据
    transformResponse: [function (data) {
        if (typeof data === 'string' && data.startsWith('{')) {
            data = JSON.parse(data)
        }
        return data
    }]

同样，拦截器中也可以自定义更多的内容

 

api.js

import { axios } from './request'

const api = {
    user: '/user/getUsers'
}

export default api

export function getUsersApi(param) {
    return axios({
        url: api.user,
        method: 'post',
        data: param,
        // headers: {
	    //   'Content-Type': 'multipart/form-data'
	    //   'Content-Type': 'application/json;charset=UTF-8'
	    // },
	    // timeout: 500000
	    // responseType: 'blob'
    })
}

 
 

使用

参考
https://www.cnblogs.com/qianxiaox/p/14025708.html