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'
  1. 统一请求头配置
headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中,一般还需要单点登录或者其他功能的通用请求头,可以一并配置进来
        }
  },
  1. 跨域、响应码处理
    提供是否允许跨域的属性——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
    })
}

 
 

使用

在这里插入图片描述

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
https://developer.android.google.cn/reference/android/Manifest.permission

)">
< <上一篇
下一篇>>