vue项目封装axios请求并挂载全局

最新推荐文章于 2024-03-09 20:59:02 发布

原创最新推荐文章于 2024-03-09 20:59:02 发布 · 1.9k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript

本文介绍如何封装axios请求，包括配置文件识别开发环境、创建axios主对象、配置请求和响应拦截器，并封装post和get请求方法。

今天试着封装axios请求拦截器，记录一下封装过程
1.首先引入axios和element-ui的提示框以及其他文件

import axios from 'axios'
import { Message,Loading } from 'element-ui'
import config from './config'
let loadingInstance = null //这里是loading

2.封装了一个配置文件识别当前开发环境，从而确定使用哪个baseUrl

const config = {
    mode: process.env.NODE_ENV == 'development' ? 'exploit' : 'onLine',
    exploit:{
        baseUrl: "http://localhost:3000/",
    },
    onLine:{
        baseUrl: "http://onLine/",
    }
}

export default {
    ...config[config.mode],
    mode: config.mode
}

3.创建axios主对象

const Axios = axios.create({
	timeout: 10000, // 请求超时时间
	baseURL: config.baseUrl, //请求地址前部
	method: 'post', //post设置请求头
	headers: {
		'Content-Type': 'application/json;charset=UTF-8'
	}
})

4.配置请求拦截器

Axios.interceptors.request.use(config => {
	loadingInstance = Loading.service({
		lock: true,
		text: 'loading...'
	})
	return config
})

5.配置响应拦截器

Axios.interceptors.response.use(response => {
	loadingInstance.close()
	const res = response.data;
	if (res.code === 200) {
		return response.data
	} else if (res.code === -1) {
		Message({
			message: res.msg,
			type: 'error',
			duration: 3 * 1000
		})
		return Promise.reject('error', res.msg)
	}
	// return response.data
}, error => {
	const msg = error.Message !== undefined ? error.Message : ''
	Message({
		message: '网络错误' + msg,
		type: 'error',
		duration: 3 * 1000
	})
	loadingInstance.close()
	return Promise.reject(error)
})

6.封装post和get请求，code值请与后台商议

export function post(params) {
	return new Promise((resolve, reject) => {
		Axios
			.post(params.url, params.data)
			.then(
				res => {
					params.success(res);
				},
				err => {
					reject(err.data)
				}
			)
			.catch(err => {
				reject(err.data)
			})
	})
}
export function get(params) {
	return new Promise((resolve, reject) => {
		Axios
			.get(params.url, params.data)
			.then(res => {
				params.success(res);
			})
			.catch(err => {
				reject(err.data)
			})
	})
}

7.挂载到main.js

import {get,post} from './request/http'
Vue.prototype.$post = post
Vue.prototype.$get= get

完整代码

import axios from 'axios'
import { Message,Loading } from 'element-ui'
import config from './config'
let loadingInstance = null //这里是loading

const Axios = axios.create({
	timeout: 10000, // 请求超时时间
	baseURL: config.baseUrl, //请求地址前部
	method: 'post', //post设置请求头
	headers: {
		'Content-Type': 'application/json;charset=UTF-8'
	}
})

// 添加请求拦截器
Axios.interceptors.request.use(config => {
	loadingInstance = Loading.service({
		lock: true,
		text: 'loading...'
	})
	return config
})

// 添加响应拦截器
Axios.interceptors.response.use(response => {
	loadingInstance.close()
	const res = response.data;
	if (res.code === 200) {
		return response.data
	} else if (res.code === -1) {
		Message({
			message: res.msg,
			type: 'error',
			duration: 3 * 1000
		})
		return Promise.reject('error', res.msg)
	}
	// return response.data
}, error => {
	const msg = error.Message !== undefined ? error.Message : ''
	Message({
		message: '网络错误' + msg,
		type: 'error',
		duration: 3 * 1000
	})
	loadingInstance.close()
	return Promise.reject(error)
})

// 发送请求
export function post(params) {
	return new Promise((resolve, reject) => {
		Axios
			.post(params.url, params.data)
			.then(
				res => {
					params.success(res);
				},
				err => {
					reject(err.data)
				}
			)
			.catch(err => {
				reject(err.data)
			})
	})
}
export function get(params) {
	return new Promise((resolve, reject) => {
		Axios
			.get(params.url, params.data)
			.then(res => {
				params.success(res);
			})
			.catch(err => {
				reject(err.data)
			})
	})
}

export default Axios