Vue-axios的实例和模块封装（四）

一.
当你写一个用到axios框架的前端的时候，建议你创建一个文件封装axios，让所有用到axios的文件都去引用自己封装axios文件。
防止以后axios框架出现大量BUG或者不再维护，方便修改你写的代码。

二.创建一个封装axios的文件

//新建一个文件夹叫network文件叫request.js
import axios fron 'axios'
export function requset(config,success,failure){
	//1.创建axios的实例
	const instance = axios.create({
		baseURL: 'http://123.207.21.32:8000',
		timeout: 5000
	})

	instance(config)
	//当回调成功时，执行此函数
	    .then(
		res => {
		success(res);
		})
	//当回调失败时，执行此函数
		.catch(
		err => {
		failure(err);
		})
}

引用封装axios文件的main.js文件

import {request} from "./network/request";

request({
	url:'/home/multidata'
},res =>{
  console.log(res);	
},err => {
  console.log(err);	
})

注意：
1.回调：当前用到的回调是main.js中有三个属性。url、res、err分别对应request.js中的三个参数config、success、failure。
当执行mian.js中res时，就调用request.js中的
res => {
success(res);
})
接下来success(res)把数据res回调到main.js中的console.log(res);方法中，来进行打印。

三.开发当中最简单、最常用的方式：创建Promise方式

//request.js

export function request(config){
//创建axios的实例
const instance = axios.create({
	baseURL: 'http://123.207.32.32:8000',
	timeout:5000
})
//发送真正的网络请求
//直接返回一个Promise，在main.js中.then接收
return instance(config)
}

//解析为什么发送网络请求的时候可以直接return instance(config)
export function request(config){
  return new Promise((resolve,reject) => {
    const instance = axios.create({
	   baseURL: 'http://123.207.32.32:8000',
	   timeout:5000
    })
    //发送真正的网络请求
    instance(config)
	 .then(res => {
	  resolve(res)
	})
	.catch(err => {
	  resolve(err)
	})
  })
}
//通过底层源码发现可以简化到上边的最简形式

//main.js

request({
	url:'/home/multidata'
}).then(res => {
	console.log(res);
}).catch(err => {
	console.log(err);
})