axios 的学习_require("axios")

一、axios 基本使用

axios是前端最流行的ajax请求库，基于Promise用于浏览器和nodejs的HTTP client，react/vue官方都推荐使用axios发ajax请求。

特点：

1. 基本promise的异步ajax请求库
2. 浏览器端／node端都可以使用
3. 支持请求／响应拦截器
4. 支持请求取消
5. 请求／响应数据转换
6. 批量发送多个请求

安装：

• npm：npm install axios
• bower：bower install axios
• cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本使用：

① 执行一个GET请求

const axios = require('axios');

// 向具有给定ID的用户发出请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 响应 success
    console.log(response);
  })
  .catch(function (error) {
    // 响应 error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// 上面的请求也可以通过下面params传递参数的方式实现
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// 想使用async/await吗? 添加`async`关键字到你的函数/方法前面就行
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

注意: async/await 是 ECMAScript 2017 的一部分，不支持Internet Explorer和旧版浏览器，因此请谨慎使用。

② 执行一个POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

1
2
3
4
5
6
7
8
9
10
11

③ 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现已完成
  }));
1
2
3
4
5
6
7
8
9
10
11
12

二、axios API

2.1 axios(config)

// 发送一个POST请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// GET请求远程图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
}).then(function (response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.2 axios(url[, config])

// 发送一个GET请求 (GET请求是默认请求方式)
axios('/user/12345');
1
2

2.3 其他请求方法

2.4 并发

2.5 创建实例

你可以使用自定义配置创建一个axios的新实例，axios.create([config])：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
1
2
3
4
5

以下为可用的实例方法：

• axios#request(config)
• axios#get(url[, config])
• axios#delete(url[, config])
• axios#head(url[, config])
• axios#options(url[, config])
• axios#post(url[, data[, config]])
• axios#put(url[, data[, config]])
• axios#patch(url[, data[, config]])
• axios#getUri([config])

2.6 取消请求

基本流程

• 配置cancelToken对象
• 缓存用于取消请求的cancel函数
• 在后面特定时机调用cancel函数取消请求
• 在错误回调中判断如果error是cancel，做相应处理

实现功能

• 点击按钮，取消某个正在请求中的请求
• 在请求一个接口前，取消前面一个未完成的请求

2.7 拦截器

你可以拦截请求或者响应在他们被then or catch处理之前。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

当你需要删除拦截器时就能删掉：

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
1
2

你可以将拦截器添加到axios的自定义实例：

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
1
2

拦截器函数/ajax 请求/请求的回调函数的调用顺序：

1. 说明: 调用axios()并不是立即发送ajax请求，而是需要经历一个较长的流程
2. 流程: 请求拦截器2 => 请求拦截器 1 => 发ajax请求 => 响应拦截器1 => 响应拦截器 2 => 请求的回调
3. 注意: 此流程是通过promise串连起来的，请求拦截器传递的是config，响应拦截器传递的是response

三、axios 请求配置

{
  // `url` 是用来请求的服务器URL
  url: '/user',

  // `method` 是发请求时的请求方式
  method: 'get', // 默认是get

  // `baseURL` 会被加到`url`前面，除非`url`已经写全了。
  // 它可以方便的为axios实例设置`baseURL`，然后传递相关联的URLs给实例对应的方法
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest`允许请求数据在发送到服务器之前对其进行更改
  // 仅适用于'PUT', 'POST', 'PATCH'
  // 数组中的最后一个函数必须返回一个string或者Buffer、ArrayBuffer、FormData或Stream的实例
  // 你可以修改headers对象.
  transformRequest: [function (data, headers) {
    // Do whatever you want to transform the data

    return data;
  }],

  // `transformResponse` 允许数据在传到then/catch之前对其进行更改
  transformResponse: [function (data) {
    // Do whatever you want to transform the data

    return data;
  }],

  // `headers` 发送自定义headers
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` URL参数，必须做位一个普通对象或者URLSearchParams对象发送
  params: {
    ID: 12345
  },

  // `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
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的时间，单位：毫秒
  // 如果请求的时间超过`timeout`, 请求即被中止
  timeout: 1000, // default is `0` (no timeout)

  // `withCredentials` 跨站点访问是否适用证书
  withCredentials: false, // 默认不使用

  // `adapter` 允许自定义处理请求，这使得测试更容易。
  // 返回一个promise并提供一个有效的响应 (see lib/adapters/README.md).
  adapter: function (config) {
    /* ... */
  },

  // `auth` 使用HTTP认证, 并提供凭据。
  // 设置一个带`Authorization'的header，覆盖任何现有的用`headers`参数设置的`Authorization'自定义headers.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 服务器将响应的数据类型，包括'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` 用于解码响应的编码方式
  // 注: 忽略`responseType`的'stream'，或者客户端请求
  responseEncoding: 'utf8', // default

  // `xsrfCookieName` 用作 xsrf 令牌的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` 携带xsrf令牌值的http header的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

  // `onUploadProgress` 允许处理上传的进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` 允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `maxContentLength` 定义允许的http响应内容的最大bytes
  maxContentLength: 2000,

  // `validateStatus` 对于一个给定的HTTP响应状态码，是resolve 还是reject 这个promise。如果`validateStatus`返回`true` (或者 `null`,`undefined`), 这个promise will be resolved; 否则，这个promise will be rejected.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  // `maxRedirects` 在node.js中要遵循的重定向的最大数量。
  // 如果设为0，不会有重定向，默认5
  maxRedirects: 5, // default

  // `socketPath` 定义一个在node.js里面用的UNIX Socket。
  // e.g. '/var/run/docker.sock' 是发送请求到docker后台.
  // 只能指定`socketPath`和`proxy`中的一个。
  // 如果都被指定，按`socketPath`的生效。
  socketPath: null, // default

  // `httpAgent` and `httpsAgent` 在node.js中，分别执行http和https请求时使用的自定义代理。
  // 允许配置类似`keepAlive`这样在默认情况下不启用的选项。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名和端口。
  // 你也可以用常规的`http_proxy`和`https_proxy`环境变量来定义你的代理。
  // 如果给你的代理配置使用环境变量，你也可以定义一个不代理的`no_proxy`环境变量，内容是一个以逗号分隔的域名列表。
  // 设成`false`就禁用代理，忽略环境变量。
  // `auth`表示HTTP Basic auth会被用于连接到代理，并提供凭证。
  // 这将设置一个`Proxy-Authorization` header，覆盖先前`headers`参数里面设置的`Proxy-Authorization` 自定义headers。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定可用于取消请求的取消令牌
  // (详情参阅下面的消除部分)
  cancelToken: new CancelToken(function (cancel) {
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

四、响应格式

{
  // `data` 提供服务器的响应
  data: {},

  // `status` 来自服务器响应的HTTP状态码
  status: 200,

  // `statusText` 来自服务器响应的HTTP状态消息
  statusText: 'OK',

  // `headers` 来自服务器响应的headers，所有header names都是小写
  headers: {},

  // `config` 提供了`axios`请求的配置
  config: {},

  // `request` 生成这个响应的请求
  // 这是node.js中最后的客户端请求实例(重定向)和浏览器XMLHttpRequest实例
  request: {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

五、配置默认值

① 全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
1
2
3

② 自定义实例默认值

// 创建实例时设置默认配置
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 实例创建后改变默认配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
1
2
3
4
5
6
7

③ 配置优先级顺序

配置将按优先顺序改变，顺序是lib/defaults.js库中的默认值，然后是实例的 defaults属性，最后config请求的参数，后者的配置优先于前者生效。这里有一个例子：

// 使用库提供的配置默认值创建实例
// 此时，timeout值为`0`，这是库的默认值
const instance = axios.create();

// 重写timeout的库默认值
// 现在所有请求将在timeout前等待2.5秒
instance.defaults.timeout = 2500;

// 重写这个请求的timeout，因为知道它需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});
1
2
3
4
5
6
7
8
9
10
11
12