axios的学习

一、axios的说明

axios：axios（理解为ajax i/o system比较好）

二、axios的基本使用

默认为get请求，且get对应params，post对应data

axios({
  url: 'http://httpbin.org/get',
  params: {
    page: 1
  }
}).then((data) => {
  console.log(data);
});

axios.get('http://httpbin.org/post',
  {params: { page: 1 }})
    .then((data) => {
  console.log(data);
});

axios.all([
  axios({
    url: 'http://httpbin.org/get'
  }),
  axios({
    url: 'http://httpbin.org/get',
    method: 'get',
    params: {
      page: 2
    }
  })
]).then(results => {
  console.log(results);
});

axios.all([
  axios({
    url: 'http://httpbin.org/get'
  }),
  axios({
    url: '/get',
    method: 'get',
    baseURL: 'http://httpbin.org'
    timeout: 10
    params: {
      page: 2
    }
  })
]).then(axios.spread((res1, ...res2) => {
  console.log(res1);
  console.log(res2);
}));

三、axios配置的相关信息

固定配置

我们可以利用axios的default来对我们的一些固定配置经行抽取

axios.defaults.baseURL = 'http://httpbin.org';
axios.defaults.timeout = 5000;

axios({
  url: '/get',
  method: 'get',
  params: {
    page: 2
  }
}).then((data) => {
  console.log(data);
});

axios内部常见的配置：

url: '/user'										/*请求地址*/
method: 'get'										/*请求类型*/
baseURL: 'http://www.mt.com/api'					/*请求根路径*/
transformRequest: [function(data) {  }]				/*请求前数据的处理*/
transformResponse: [function(data) {  }]			/*请求后数据的处理*/
headers: { 'x-Requested-With':'XMLHttpRequest' }	/*自定义的请求头*/
params: { id: 12 }									/*URL传递的参数get*/
paramsSerializer: function(params) {  }				/*查询对象序列化函数*/
data: { key: '毛毛' }								/*请求体post*/
timeout: 1000										/*超时设置，毫秒*/
withCredentials: false								/*跨域是否带Token*/
adapter: function(resolve, reject, config) {  }		/*自定义请求处理*/
auth: { uname: '涂涂', pwd: '12' }					/*身份验证信息*/
responseType: 'json'								/*响应式数据格式：json/blob/document/arraybuffer/text/stream*/

四、axios的局部实例化（常用）

所谓全局指共用一套配置，局部使用多个配置（个人理解）
上面的axios都是全局实例化的axios，而全局实例化的axios是不利用正常开发的，比如：当需要从多个服务器里面获得数据的时候，就意味着需要有多个ip地址，而多个ip地址意味着多个主机，而全局axios的baseURL只能是一个ip地址，就无法满足要求
axios的局部实例化（局部），局部的axios里面的 固定配置可以针对性的配置，且利于后期维护，推荐使用

const instance = axios.create({
  baseURL: 'http://httpbin.org',
  timeout: 5000
});

instance({
  url: 'post',
  method: 'post'
}).then(res => {
  console.log(res);
});

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

五、对axios框架进行简单的封装

src ——network ——request.js
为什么要进行axios封装呢？
因为如果不进行封装而直接使用别人的框架，假如有一天框架不再维护了或者需要更换别的框架，维护代码就很困难（需要在多个使用了该框架的地方进行修改内容），而对axios进行简单的封装就可以只在一个地方更改相应的框架，以此来解决这个问题

/*第一种*/
import axios from 'axios'

export function request(config) {
  return new Promise((resolve, reject) => {				/*直接return个promise*/
    const instance = axios.create({						/*实例化axios*/
      baseURL: 'http://httpbin.org',
      timeout: 5000
    });
    instance(config)									/*使用axios*/
      .then(res => {
        resolve(res);									/*成功时调用resolve函数并传递参数*/
      })
      .catch(err => {
        reject(err);									/*失败时调用reject函数并传递参数*/
      });
  })
}

/*第二种*/
import axios from 'axios'

export function request(config) {		
  const instance = axios.create({						/*实例化axios*/
    baseURL: 'http://httpbin.org',
    timeout: 5000
  });
  
  return instance(config)								/*直接返回实例对象instance的结果，因为实例对象返回的结果是一个promise*/
}

/*封装函数的使用*/
import { request } from './components/request'
request({
  url: 'post',
  method: 'post'
}).then(res => {
  console.log(res);
})

六、axios的拦截器

拦截器用于我们在每次发送请求（请求成功或失败）或者在响应的时候（响应成功或失败）对业务逻辑进行相应的处理，所以拦截器是针对4种情况的

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000
  });
  
  instance.interceptors.request.use(				/*请求成功或失败*/
    config => {							/*请求成功的时候执行config函数*/
      return config;					/*这里必须要return config，因为它本身在我们没有拦截的时候return了config，
      而现在我们拦截了request也需要return config，且这里的config（形参）是实例对象发送请求的信息（一些请求头信息）*/
    },
    err => {
      console.log(err);					/*请求失败的时候执行err函数*/
    }
  );
  
  instance.interceptors.response.use(				/*响应成功或失败*/
    res => {							/*响应成功的时候执行res函数*/
      return res;					/*这里必须要return res（当然也可以返回res.data，因为我们只需要使用数据），因为它本身在我们没有拦截的时候return了res，
      而现在我们拦截了response也需要return res，且这里的res（形参）是实例对象得到响应时的一些信息（一些响应头信息）*/
    },
    err => {
      console.log(err);					/*响应失败的时候执行err函数*/
    }
  );
  
  return instance(config)
}

本文只用于个人学习与记录