Axios 实例与模块封装

一、实例

为什么引入axios实例？不是有axios()可以用吗？
因为，直接使用axios时，是全局的使用，当url的服务器地址不一样时，即跨域请求，那么就需要修改全局的配置了，这样很麻烦。
于是，使用实例的Axios，即局部的axios实例。

axios实例基本使用：

 // ./src/main.js
 const instance1 = axios.create({
    
    
  baseURL:'http://127.0.0.0',
  timeout : 3000
});
const instance2 = axios.create({
    
    
  baseURL:'http://56.1.4.1',
  timeout : 3000
});

instance1({
    
    
  url: '/get',
}).then(res =>{
    
    
  console.log(res);
});

instance2({
    
    
  url: '/get',
}).then(res =>{
    
    
  console.log(res);
});

即，使用axios.create({//配置信息})，创建一个实例，传入配置参数，需要在发送网络请求的时候，直接调用这个实例，一个实例就对应一个服务器的地址。

二、axios模块封装

为什么引入axios模块封装？
因为，每个组件都可能有发送网络请求的情况，开发中会给每个组件的created()声明周期函数里面添加请求代码，如果要给每个组价都写这个请求代码，那么迭代技术的时候就难维护。
所以，需要把这些发送请求的代码部分抽离出来，封装再导入。

网络请求封装思路：
在./src下创建目录network，里面写网络请求的代码
例如, ./src/network/request.js:

 //./src/network/request.js
import axios from 'axios';

export function requset(config, success, failure){
    
    
    
    const instance1 = axios.create({
    
    
        baseURL: 'http://httpbin.org',
        timeout : 5000
    });

    instance1(config).then( res=> {
    
    
        console.log(res);
        success(res);//data processing
    }).catch(err => {
    
    
        console.log('err');
        failure(err);
    });
};

随后，在main.js中导入这个function，调用并发送网络请求配置，回调函数等。
注意，request接收的参数，success、failure都是回调函数，因为，不能在网络请求的代码部分，写一些数据处理的代码，所以就把这些代码"回调" 出去。

// ./src/main.js
import {
    
    Request} from './network/request';

Request({
    
     url: '/get'},
 res =>{
    
     console.log(res)},
 err =>{
    
     console.log(err)}
 );

当然，也可以使用Promise进行封装，把网络请求代码和处理数据代码分离开，即：
高级写法：

 // ./src/network/request.js
 import axios from 'axios';
export function request(config){
    
    
	const instance1 = axios.create({
    
    
		baseURL: 'http://httpbin.org',
        timeout : 5000
	});
	
	return instance1(config);
}
// ./src/main.js
import {
    
    request} from './network/request';

request({
    
     
	url: '/get',
}).then(...//success).catch(...//failure)

因为，axios.create()是经过Promise封装的，它执行的结果本身就返回一个 new Promise()，所以，这里直接返回instance实例