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
    评论
如果要学习axios,首先需要了解它是什么以及它的作用。axios是一个基于Promise的HTTP客户端,用于发起HTTP请求并处理响应。它可以在浏览器端和Node.js环境中使用,可以实现对服务器的GET、POST、PUT、DELETE等不同类型的请求。 要学习axios,可以从以下几个方面入手: 1. 安装和导入:首先需要通过npm或者yarn安装axios,然后在需要使用它的文件中,使用import或者require语句导入axios模块。 2. 发送请求:使用axios发送请求非常简单,只需要调用axios的方法并传入请求的URL和其他必要参数即可。例如,可以使用axios.get()发送一个GET请求,axios.post()发送一个POST请求等。 3. 处理响应:axios可以返回一个Promise对象,可以通过调用.then()方法来处理成功的响应,通过调用.catch()方法来处理失败的响应。在.then()中可以获取到服务器返回的数据,并进行相应的操作。 4. 配置请求:axios支持通过配置项来进行请求的设置,如设置请求头、超时时间等。可以在请求时传入一个具有特定配置的对象,以覆盖默认的配置。 5. 拦截器:axios还可以通过使用拦截器来在请求发送前和响应返回后对请求和响应进行全局的处理。可以通过axios.interceptors.request.use()注册请求拦截器,通过axios.interceptors.response.use()注册响应拦截器。 6. 错误处理:当请求出现错误时,axios会返回一个失败的Promise。可以通过.catch()方法捕获错误,并进行错误处理。 最后,还可以查看axios的官方文档,其中包含了详细的用法和示例代码,可以更加深入地了解和学习axios的使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值