vue封装axios请求

1.新建request.js文件，然后写入

import axios from 'axios'
import {MessageBox,Message} from 'element-ui'
import qs from 'qs'
import router from '@/router'
import {uuid} from '@/utils'
import {getAccessToken} from '@/utils/accessToken'


const service = axios.create({
	baseURL: 'https://***********',//请求前缀
	timeout: 15000 //请求超时时间
})


service.interceptors.request.use(
	config => {
		if(config.data){
			//去除数据的空格
			Object.keys(config.data).forEach((key)=> {
				if (typeof (config.data[key]) == 'string') {
					config.data[key] = config.data[key].trim()
				}
			})
			config.data = qs.stringify(config.data)
		}
		//token令牌判断
		if (getAccessToken()) {
			config.headers['token'] = getAccessToken(),
			config.headers['requestId'] = uuid()
		}
		return config
	},
	error => {
		console.log(error)
		return Promise.reject(error)
	}
)


service.interceptors.response.use(
	response => {
		const res = response.data
		//数据正确请求的编码
		if (res.status !== 200) {
			//没有正确返回时的判断，可根据code,status进行判断。下面是统一处理了
			Message({
				message: res.msg || 'error',
				type: 'error',
				duration: 5 * 1000
			})
			return Promise.reject(new Error(res.msg || 'Error'))
		} else {
			return res
		}
	},
	error => {
		console.log('err' + error)
		Message({
			message: error.msg || '数据服务异常',
			type: 'error',
			duration: 5 * 1000
		})
		return Promise.reject(error)
	}
)

export default service

2.新建api文件夹，下面放请求的接口api

import request from '@/utils/request' //引入封装的axios请求文件

/**
 * @Author      *******
 * @description 查询数据
 * @param       {Object}  data
 * @return      {}     
 */
export function findByPage(data) {
  return request({
    url: '/brand/findByPage',
    method: 'post',
    data
  })
}

3.页面使用

import {findByPage} from '@/api/brand'//在页面引入你的请求api

//定义方法进行数据请求
//下面是两种请求方式，视情况而定

//第一种请求方式
async fetchData(){
	const { data } = await findByPage(请求需要传的参数)
	//下面写数据逻辑处理
}

//第二种请求方式
fetchData(){
	findByPage(请求需要传的参数).then(res=>{
		//写数据处理逻辑
	})
}