基于vue框架axios网络请求封装

原因

axios 是网络请求的第三库，为了防止降低对第三库的依赖性，所以将axios请求封装为函数，方便后期代码的维护

安装

npm install axios

封装

1. 在目录结构 src 文件夹下创建 network/request.js

	// 引入axios库
	import axios from 'axios'
	// 封装axios实例
	export function request(config){
		// 1. 创建axios实例
		const instance = axios.create({
			// 实例对象的 公共配置项
			baseURL:'http://jsonplaceholder.typicode.com',
			timeout:5000,
			// 等等~需求的配置项
		})
		
		// 2. 配置拦截器
		// 2.1 请求拦截 (config,失败信息)
		instance.interceptors.request.use(config=>{
			// 举例一些对config 操作环境
			// (1) 在发送请求之前，config中有一些配置信息不符合服务器标准
			// (2) 在发送请求之前，需要界面中显示正在请求的图标，例如旋转的 ○
			// (3) 某些网络请求在请求前必须携带特殊信息（登录状态携带token信息）
			return config;
		},error=>{
			// 对失败信息处理
			console.log(error);
			// return new Promise.reject(error);
		})
		// 2.2 响应拦截（响应数据，失败信息）
		instance.interceptors.response.use(result=>{
			// 对返回数据结果进行处理
			 return result.data;
		},error=>{
			// 对失败信息处理
			console.log(error)
		})
		
		// 3. 发送真正的网络请求（基于axios源码，此时instance就是一个Promise对象）
		return instance(config)
	}

2. 假设在 main.js 调用上述封装的函数

	// 导入已封装好的 axios 模块
	import {request} from './network/request'
	// 调用方法
	request({
		url:'/posts',
		// 默认GET请求 http://jsonplaceholder.typicode.com/post?userId=5
		params:{
			userId:5,
		}
	}).then(res =>{
		// 对请求回来的数据进行操作处理
		console.log(res);
	}).catch(err =>{
		console.log(err);
	})

视频总结 https://www.bilibili.com/video/BV15741177Eh?p=147