Axios使用及源码解析

Axios使用及源码解析

简介

axios 是一个用于浏览器和Node.js上的基于 Promise 的http网络库。

大纲

使用方式

安装:

npm install axios

使用:

//引入axios
const axios = require('axios');
import axios from 'axios';

axios的四种使用方式

1. axios(config)

直接将相关配置包括请求url作为参数传入到axios方法中

axios({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    method: 'get'
}).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error)
});
2. axios(url[, config])

还是使用axios方法,但是第一个参数传入请求url,第二个参数传入其他配置参数。

axios('https://jsonplaceholder.typicode.com/todos/1', {
    method: 'get'
}).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error)
});
3. axios[method](url[, config])

使用axios暴露出来的get,post,delete,put等请求方法,参数设置同第2种 axios(url[, config])

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
    timeout: 1000
}).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error);
});
4. axios.request(config)

使用axios暴露出来的request方法,参数设置同第1种axios(config)

axios.request({
    url: 'https://jsonplaceholder.typicode.com/todos/1',
    timeout: 1000
}).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error)
});

请求配置

在上一步的发起请求的方法中,我们都能看到config这个配置参数,通过设置这个参数的值,可以达到配置请求的目的。在axios中,config是沟通调用方和网络库的桥梁,

常用的配置项如下所示:

{
  // `url` 是用于请求的服务器 URL,相对路径/绝对路径
 url: '/api/users',

 // `method` 是创建请求时使用的http方法,包括get, post, put, delete等
 method: 'get', // default

 // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
 baseURL: 'https://some-domain.com/api/',

 // `transformRequest` 允许在向服务器发送前,修改请求数据
 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
 // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
 transformRequest: [function (data, headers) {
   // 对 data 进行任意转换处理
   return data;
 }],

 // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
 transformResponse: [function (data) {
   // 对 data 进行任意转换处理
   return data;
 }],

 // `headers` 是即将被发送的自定义请求头
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 // `params` 是即将与请求一起发送的 URL 参数
 // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
 params: {
   name: 'John'
 },

  // `paramsSerializer` 是一个负责 `params` 序列化的函数
 // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
 paramsSerializer: function(params) {
   return Qs.stringify(params, {arrayFormat: 'brackets'})
 },

 // `data` 是作为请求主体被发送的数据
 // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
 // 在没有设置 `transformRequest` 时,必须是以下类型之一:
 // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
 // - 浏览器专属:FormData, File, Blob
 // - Node 专属: Stream
 data: {
   firstName: 'John'
 },

 // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
 // 如果请求花费了超过 `timeout` 的时间,请求将被中断
 timeout: 1000,

 // `adapter` 允许自定义处理请求,以使测试更轻松
 // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
 adapter: function (config) {
   /* ... */
 },

// `auth` 表示应该使用 HTTP 基础验证,并提供凭据
 // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
 auth: {
   username: 'janedoe',
   password: 's00pers3cret'
 },

  // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
 responseType: 'json', // default

 // `responseEncoding` 表示用于响应数据的解码方式
 responseEncoding: 'utf8', // default

 // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
 validateStatus: function (status) {
   return status >= 200 && status < 300; // default
 },

 // `cancelToken` 指定用于取消请求的 cancel token
 cancelToken: new CancelToken(function (cancel) {
 }),
 ...
}

拦截器

拦截器,类似于中间件的概念,是axios的核心功能之一,主要是分为两种:请求拦截器和响应拦截器。有了拦截器,我们能在网络请求之前,对网络请求配置做处理。在返回数据之前,对返回数据做处理。

中间件,拦截器:
一般用于对一个目标方法的前置或后置切片操作,可以将一些额外的脏逻辑写到其他的文件中管理,提高目标方法的简洁性。

使用方式:

//请求拦截器
const requestInterceptor = axios.default.interceptors.request.use((config) => {
   //在请求发送前,对请求配置(AxiosRequestConfig)做一些处理
   return config;
}, (error) => {
   return Promise.reject(error);
});

//移除之前添加的拦截器
axios.default.interceptors.request.eject(requestInterceptor);

//响应拦截器
axios.default.interceptors.response.use((response) => {
   //对请求响应数据做一些处理
   return response;
}, (error) => {
   return Promise.reject(error);
});

取消请求

支持取消请求也是axios的一个核心功能,在配置中实现一个cancelToken的参数就能取消。

//取消请求
const cancelToken = axios.CancelToken;
const source = cancelToken.source();

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
   cancelToken: source.token
}).then(response => {
   console.log(response.data);
}).catch(error => {
   if(axios.isCancel(error)) {
       console.log(error.message);
   } else {
       console.log(error)
   }
});

source.cancel('canceled by user');

默认配置

请求配置可以在每个请求中单独设置,也可以在defaults中为全局设置。

//默认baseUrl
axios.defaults.baseUrl = 'https://jsonplaceholder.typicode.com';
//默认超时时间
axios.defaults.timeout = 3000;
//默认Authorization头
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

数据转换

请求数据转换
axios.defaults.transformRequest.push((data, headers)=>{
    //处理请求的data
    return data;
});
返回数据转换
axios.defaults.transformResponse.push((data, headers)=>{
    //处理返回的data
    return data;
});

源码解析

源码分析基于0.19.2版本

首先看下源码的目录结构:

可以看到依次可以分为以下几个部分:

  • adapters: 主要是网络请求适配器部分的源码,包括浏览器端的xhr和nodejs端的http。
  • cancel: 主要是取消请求的cancel和cancelToken相关类。
  • core: axios的核心功能,重点类有以下几个: Axios, dispatchRequest和InterceptorManager。剩余的主要是一些辅助的方法。
  ├── /core/
│ │ ├── Axios.js               # 定义Axios类
│ │ ├── dispatchRequest.js     # 用来调用适配器方法发送http请求
│ │ ├── InterceptorManager.js  # 拦截器构造函数
  • helper : 帮助类
  • axios: 定义axios库的接口和默认实例
  • defaults: 默认配置
  • utils: 工具方法

原文地址:https://www.cnblogs.com/JohnTsai/p/axios.html

时间: 2024-10-30 19:35:31

Axios使用及源码解析的相关文章

ChrisRenke/DrawerArrowDrawable源码解析

转载请注明出处http://blog.csdn.net/crazy__chen/article/details/46334843 源码下载地址http://download.csdn.net/detail/kangaroo835127729/8765757 这次解析的控件DrawerArrowDrawable是一款侧拉抽屉效果的控件,在很多应用上我们都可以看到(例如知乎),控件的github地址为https://github.com/ChrisRenke/DrawerArrowDrawable

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn

eclipse中导入jdk源码、SpringMVC注解@RequestParam、SpringMVC文件上传源码解析、ajax上传excel文件

eclipse中导入jdk源码:http://blog.csdn.net/evolly/article/details/18403321, http://www.codingwhy.com/view/799.html. ------------------------------- SpringMVC注解@RequestParam:http://825635381.iteye.com/blog/2196911. --------------------------- SpringMVC文件上传源

String源码解析(一)

本篇文章内的方法介绍,在方法的上面的注释讲解的很清楚,这里只阐述一些要点. Java中的String类的定义如下: 1 public final class String 2 implements java.io.Serializable, Comparable<String>, CharSequence { ...} 可以看到,String是final的,而且继承了Serializable.Comparable和CharSequence接口. 正是因为这个特性,字符串对象可以被共享,例如下面

Flume-ng源码解析之Channel组件

如果还没看过Flume-ng源码解析之启动流程,可以点击Flume-ng源码解析之启动流程 查看 1 接口介绍 组件的分析顺序是按照上一篇中启动顺序来分析的,首先是Channel,然后是Sink,最后是Source,在开始看组件源码之前我们先来看一下两个重要的接口,一个是LifecycleAware ,另一个是NamedComponent 1.1 LifecycleAware @[email protected] interface LifecycleAware {  public void s

Spring源码解析-applicationContext

Demo uml类图 ApplicationContext ApplicationListener 源码解析 主流程 obtainFreshBeanFactory prepareBeanFactory invokeBeanFactoryPostProcessors registerBeanPostProcessors registerListeners finishRefresh 总结 在已经有BeanFactory可以完成Ioc功能情况下,spring又提供了ApplicationContex

socketserver源码解析和协程版socketserver

来,贴上一段代码让你仰慕一下欧socketserver的魅力,看欧怎么完美实现多并发的魅力 client import socket ip_port = ('127.0.0.1',8009) sk = socket.socket() sk.connect(ip_port) sk.settimeout(5) while True: data = sk.recv(1024) print('receive:',data.decode()) inp = input('please input:') sk

Handler机制(四)---Handler源码解析

Handler的主要用途有两个:(1).在将来的某个时刻执行消息或一个runnable,(2)把消息发送到消息队列. 主要依靠post(Runnable).postAtTime(Runnable, long).postDelayed(Runnable, long).sendEmptyMessage(int).sendMessage(Message).sendMessageAtTime(Message).sendMessageDelayed(Message, long)这些方法来来完成消息调度.p

Android EventBus源码解析, 带你深入理解EventBus

上一篇带大家初步了解了EventBus的使用方式,详见:Android EventBus实战 没听过你就out了,本篇博客将解析EventBus的源码,相信能够让大家深入理解该框架的实现,也能解决很多在使用中的疑问:为什么可以这么做?为什么这么做不好呢? 1.概述 一般使用EventBus的组件类,类似下面这种方式: [java] view plain copy public class SampleComponent extends Fragment { @Override public vo