记录项目中axios封装使用

前言

记录一下项目中axios的封装使用，方便以后回顾

安装axios

npm install axios --save

在项目根目录下新建axios文件夹，其下创建index.js

引入axios

import axios from 'axios';

创建实例并进行相关配置

/**
*  我这里使用的是新版本的webpack进行跨域配置，所以使用的VUE_APP_BASE_URL常量进行环境切换
* node会自动判断当前环境，一般默认就是开发环境development
/

const axiosInstance = axios.create({
	baseURL: process.env.VUE_APP_BASE_URL,
	// baseURL: 'http://127.0.0.1:8035/api/',
    timeout: 30000
})
// post请求头的设置
axiosInstance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 封装方法
export default {
    get(url, params) {
        return axiosInstance({
			method: 'get',
			url: url,
			params
		})
    },
    post(url, data, params) {
        return axiosInstance({
			method: 'post',
			url: url,
			params,
			data: data
		})
    }
}

这里贴一下config/dev.env.js中的代码
注：这里用的是比较新的版本，旧版本cli可能是需要自己创建环境文件

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_BASE_URL : '"http://127.0.0.1:8035/api/"'
})

使用

在api文件夹中新建service.js

import fetch from "@/axios";   //这里fetch只是一个名字，这里是什么下面就用什么

let service = {}; //新建一个对象，在对象中增加方法，对象暴露出去，我们要使用的时候引入这个对象
service.functionName = (data) => {
    return fetch.post('/example/xxxx',data)
}

export default service;

axios在token登录中的姿势

拦截请求，在头部文件中带上token

axiosInstance.interceptors.request.use(
	config => {
		const token = getToken()
		if (token) {
			config.headers.common['key'] = `${token}`  //这个key需要前后端商量对接好
		}
		return config
	},
	error => {
		return Promise.reject(error)
	}
)

拿到响应的时候，也可以进行拦截，然后做出相应的处理之后再返回给页面

axiosInstance.interceptors.response.use(
	response => {
		let newToken = response.headers['newkey']  //这里的newkey也是和后台对接商量，就是首次登陆的用户后台会做出判断，返回一个token值给你，或者是登陆超时需要重新获取token
		if (newToken) {
			setToken(newToken)
		}
		return response   //没有拿到新的token说明是已经有token了，直接返回响应,这里多说一句自己踩过的坑，
		//坑不大，就是这里返回response的话，前端每次那数据都是res.data.data，
		//这里直接返回response.data，前面拿数据就会少一层
		//这个看情况用吧，返回response.data比较适用于后台提前对响应内容做了对应处理的情况。
		//用不习惯的直接response就行，问题不大
	},
	error => {
		let response = error.response
		if (response.code === 401) {   
			removeToken()
			router.push('/login')
		} else if (response.status === 403) {
			router.push({
				name: 'Login'
			})
		}
		return Promise.reject(response)
	}
)