axios封装和请求响应劫持 -- 好记性不如烂笔头

axios封装与请求响应劫持

• 在src目录下，创建api目录，用来封装axios
  

• axios.js – 源代码

import axios from 'axios'
import config from '../config/index.js'
// 判断是开发环境，还是运行环境
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

class HttpRequect {
	// 初始化构造方法
	constructor(baseUrl) {
		this.baseUrl = baseUrl;
		this.queue = {}
	}
	// 定义将被写死的配置
	getInsideonfig() {
		const config = {
			baseURL: this.baseUrl,
			header: {
				// 配置请求头
				
			}
		}
		return config;
	}
	// 定义拦截器  instance:axios实例   url:请求地址
	interceptors(instance,url) {
		instance.interceptors.request.use(config=>{
			// 处理请求
			console.log("拦截和处理请求")
			console.log(config)
			return config
		})
		instance.interceptors.response.use(res=>{
			// 处理响应
			console.log("处理响应")
			console.log(res)
			return res
		},(error)=>{
			// 请求出问题
			console.log(error)
			return {error:'网络出错'}
		})
	}
	// 发起请求
	request(options) {
		const instance = axios.create() //创建axios实例
		options = Object.assign(this.getInsideonfig(),options)
		this.interceptors(instance,options.url)
		return instance(options);
	}
}
// 实例化对象

const axiosObj = new HttpRequect(baseUrl)
export default axiosObj

api目录下data.js文件

• 在该文件下，存放所有的请求操作
• 例：请求轮播图数据代码如下

import axios from './axios.js'

export const getBannerData = ()=>{
	return axios.request({
		url:'banner',
		method:"get"
	})
}

创建axios配置目录

• 用来存放后台接口地址前缀
  
• 源码：

export default {
	title: "config_name",
	baseUrl: {
		dev: "http://localhost:8080", //开发时候的后台地址
		pro: "" //产品上线发布之后，后台接口地址
	}
}

使用封装好的axios

• 首先需要导入需要请求的操作

import {getBannerData} from './api/data.js'

• 使用请求操作

async mounted() {
  	let result = await getBannerData()
  }

• 完整源代码如下：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import {getBannerData} from './api/data.js'
export default {
  name: 'app',
  async mounted() {
  	let result = await getBannerData()
  }
}
</script>
<style>
</style>

第一份博客，记录VUE的学习技术点：axiso

• 封装axios,用到了类的知识，创建HttpRequect类之后，需要进行实例化
• 判断是开发环境，还是运行环境，使用不同的URL
  const baseUrl = process.env.NODE_ENV === ‘development’ ? config.baseUrl.dev : config.baseUrl.pro
• 发起异步请求，需要对axios进行创建实例化
• 封装axios之后，需要将该实例对象抛出：export default axiosObj