Axios 是甚么？是不是用？
Axios 是两个如前所述 promise 互联网允诺库，促进作用于 node.js 和应用程序中。它是 isomorphic 的（即同两套标识符能运转在应用程序和 node.js 中）。在服务器端它采用原生植物 node.js http 组件，而在应用程序（下载端）则采用 XMLHttpRequests。
优点
从应用程序建立 XMLHttpRequests从 node.js 建立 http 请求全力支持 Promise API截击允诺和积极响应切换允诺和积极响应统计数据中止允诺手动切换 JSON 统计数据应用程序全力支持防卫 XSRF示例
发动两个 GET 允诺
const axios = require(“axios”);
// 向取值 ID 的使用者发动允诺
axios
.get(“/user?ID=12345”)
.then(function (response) {
//处置获得成功情形
console.log(response);
})
.catch(function (error) {
//奈镇情形
console.log(error);
})
.then(function () {
//总是会执行
});
// 上述允诺也能按以下方式完成
axios
.get(“/user”, {
params: {
ID: 12345,
},
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
//总是会执行
});
// 全力支持 async/await 用法
async function getUser() {
try {
const response = await axios.get(“/user?ID=12345”);
console.log(response);
} catch (error) {
console.error(error);
}
}
发动两个 POST 允诺
axios
.post(“/user”, {
firstName: “Fred”,
lastName: “Flintstone”,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
发动多个并发允诺
function getUserAccount() {
return axios.get(“/user/12345”);
}
function getUserPermissions() {
return axios.get(“/user/12345/permissions”);
}
Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {
const acct = results[0];
const perm = results[1];
});
能向 axios 传递相关配置来建立允诺
axios(config)
// 发动两个 post 允诺
axios({
method: “post”,
url: “/user/12345”,
data: {
firstName: “Fred”,
lastName: “Flintstone”,
},
});
–
// 在 node.js 用 GET 允诺axios({
method: “get”,
url: “http://bit.ly/2mTM3nY”,
responseType: “stream”,
}).then(function (response) {
response.data.pipe(fs.createWriteStream(“ada_lovelace.jpg”));
});
axios(url[,config])
// 发动两个 GET 允诺（默认允诺方式）
axios(/user/12345);
axios 实例
axios.create([config])
const instance = axios.create({
baseURL:https://some-domain.com/api,
timeout:1000,
headers:[X-Custom-Header:foobar]
})
允诺配置
这些是建立允诺时能用的配置选项。只有 url 是必需的，如果没有指定 method ，允诺将默认采用 GET 方法。
{
// `url` 是用于允诺的服务器 URL
url: “/user”,
// `method` 是建立允诺时采用的方法
method: “get”, // 默认值
// `baseURL` 将手动加在 `url` 前面，除非 `url` 是两个绝对 URL
// 它能通过设置两个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: “https://some.com/api”,
// `transformRequest` 允许向服务器发送前，修改允诺统计数据
// 它只能用于 PUT,POST和PATCH这几个允诺方法 // 数组中最后两个函数必须返回两个字符串， 两个Buffer实例，ArrayBuffer，FormData，或 Stream
// 你能修改允诺头
transformRequest: [
function (data, headers) {
// 对发送的 data 进行任意切换处置
return data;
},
],
// 自定义允诺头
headers: { “X-Requested-With”: “XMLHttpRequest” },
// `params` 是与允诺一起发送的 URL 参数
// 必须是两个简单对象或 URLSerchParams 对象
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, DELETE 和 PATCH 允诺方法
// 在没有设置 `transformRequest` 时，则必须是以下类型之一: // – string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// – 应用程序专属: FormData, File, Blob // – Node 专属: Stream, Buffer
data: {
firstName: “Fred”,
},
// 发送允诺体统计数据的可选语法
// 允诺方式 post
// 只有 value 会被发送，key 则不会 data: Country=Brasil&City=Belo Horizonte,
// `timeout` 指定允诺超时的毫秒数。
// 如果允诺时间超过 `timeout` 的值，则允诺会被中断 timeout: 1000, // 默认值是 `0` (永不超时)
// `withCredentials` 表示跨域允诺时是否需要采用凭证
withCredentials: false, // default
// `adapter` 允许自定义处置允诺，这使测试更加容易。
// 返回两个 promise 并提供两个有效的积极响应
adapter: function (config) {
/* … */
},
// `auth` HTTP Basic Auth
auth: {
username: janedoe,
password: s00pers3cret
},
// `responseType` 表示应用程序将要积极响应的统计数据类型 // 选项包括: arraybuffer, document, json, text, stream
// 应用程序专属：blob
responseType: json, // 默认值
// `responseEncoding` 表示用于解码积极响应的编码 (Node.js 专属)
// 注意：忽略 `responseType` 的值为 stream，或者是应用程序允诺
// Note: Ignored for `responseType` of stream or client-side requests responseEncoding: utf8, // 默认值
// `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称 xsrfCookieName: XSRF-TOKEN, // 默认值
// `xsrfHeaderName` 是带有 xsrf token 值的http 允诺头名称 xsrfHeaderName: X-XSRF-TOKEN, // 默认值
// `onUploadProgress` 允许为上传处置进度事件
// 应用程序专属
onUploadProgress: function (progressEvent) {
// 处置原生植物进度事件
},
// `onDownloadProgress` 允许为下载处置进度事件
// 应用程序专属
onDownloadProgress: function (progressEvent) {
// 处置原生植物进度事件
},
// `maxContentLength` 定义了node.js中允许的HTTP积极响应内容的最大字节数 maxContentLength: 2000,
// `maxBodyLength`（仅Node）定义允许的http允诺内容的最大字节数
maxBodyLength: 2000,
// `validateStatus` 定义了对于取值的 HTTP状态码是 resolve 还是 reject promise。 // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)， // 则promise 将会 resolved，否则是 rejected。
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认值
},
// `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
// 如果设置为0，则不会进行重定向
maxRedirects: 5, // 默认值
// `socketPath` 定义了在node.js中采用的UNIX套接字。
// e.g. /var/run/docker.sock 发送允诺到 docker 守护进程。
// 只能指定 `socketPath` 或 `proxy` 。 // 若都指定，这采用 `socketPath` 。
socketPath: null, // default
// `httpAgent` and `httpsAgent` define a custom agent to be used when performing http // and https requests, respectively, in node.js. This allows options to be added like // `keepAlive` that are not enabled by default.
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// `proxy` 定义了代理服务器的主机名，端口和协议。 // 您能采用常规的`http_proxy` 和 `https_proxy` 环境变量。
// 采用 `false` 能禁用代理功能，同时环境变量也会被忽略。
// `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。 // 这将设置两个 `Proxy-Authorization` 允诺头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 允诺头。 // 如果代理服务器采用 HTTPS，则必须设置 protocol 为`https`
proxy: {
protocol: https,
host: 127.0.0.1,
port: 9000,
auth: {
username: mikeymike,
password: rapunz3l
}
},
// see https://axios-http.com/zh/docs/cancellation cancelToken: new CancelToken(function (cancel) {
}),
// `decompress` indicates whether or not the response body should be decompressed // automatically. If set to `true` will also remove the content-encoding header // from the responses objects of all decompressed responses
// – Node only (XHR cannot turn off decompression) decompress: true // 默认值
};
积极响应结构
两个允诺的积极响应包含以下信息
{
// `data` 由服务器提供的积极响应
data: {},
// `status` 来自服务器积极响应的 HTTP 状态码 status: 200,
// `statusText` 来自服务器积极响应的 HTTP 状态信息
statusText: “OK”,
// `headers` 是服务器积极响应头
// 所有的 header 名称都是小写，而且能采用方括号语法访问 // 例如：`response.headers[content-type]`
headers: {},
// `config` 是 `axios` 允诺的配置信息 config: {},
// `request` 是生成此积极响应的允诺
// 在 node.js 中它是最后两个 clientRequest 实例（in redirects ），
// 在应用程序中则是 XMLHttpRequest 实例 request: {}
};
当采用 then 时，您将接收如下积极响应：
axios.get(/user/12345)
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
默认配置
您能指定默认配置，它将促进作用于每个允诺
全局 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;
自定义实例默认值
// 建立实例时配置默认值
const instance = axios.create({
baseURL: https://api.example.com
});
// 建立实例后修改默认值
instance.defaults.headers.common[Authorization] = AUTH_TOKEN;
配置的优先级
配置将会按优先 lib/defaults.js 中找到的库默认值，然后是实例的 defaults 属性，最后是允诺 config 参数。后面的优先级要高于前面的。
// 采用库提供的默认配置建立实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();
// 重写库的超时默认值
// 现在，所有采用此实例的允诺都将等待2.5秒，然后才会超时instance.defaults.timeout = 2500;
// 重写此允诺的超时时间，因为该允诺需要很长时间
instance.get(/longRequest, {
timeout: 5000
});
截击器
在允诺或积极响应被 then 或 catch 处置前截击它们。
// 添加允诺截击器
axios.interceptors.request.use(function (config) {
// 在发送允诺之前做些甚么
return config;
}, function (error) {
// 对允诺错误做些甚么
return Promise.reject(error);
});
// 添加积极响应截击器axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对积极响应统计数据做点甚么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对积极响应错误做点甚么
return Promise.reject(error);
});
如果你稍后需要移除截击器，能这样：
const myInterceptor = axios.interceptors.request.use(function () {/*…*/});
axios.interceptors.request.eject(myInterceptor);
能给自定义的 axios 实例添加截击器。
const instance = axios.create();
instance.interceptors.request.use(function () {/*…*/});
错误处置
axios.get(/user/12345)
.catch(function (error) {
if (error.response) {
// 允诺获得成功发出且服务器也积极响应了状态码，但状态标识符超出了 2xx 的范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 允诺已经获得成功发动，但没有收到积极响应
// `error.request` 在应用程序中是 XMLHttpRequest 的实例， // 而在node.js中是 http.ClientRequest 的实例
console.log(error.request);
} else {
// 发送允诺时出了点问题
console.log(Error, error.message);
}
console.log(error.config);
});
采用 validateStatus 配置选项，能自定义抛出错误的 HTTP code。
axios.get(/user/12345, {
validateStatus: function (status) {
return status < 500; // 处置状态码小于500的情形 }
})
axios.get(/user/12345)
.catch(function (error) {
console.log(error.toJSON());
});
.
