axios的学习

一、axios的说明

axiosaxios(理解为ajax i/o system比较好)

在这里插入图片描述

二、axios的基本使用

默认为get请求且get对应paramspost对应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配置的相关信息

固定配置

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

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)
}

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值