一、Axios 是甚么?
Axios 是能发出 http 允诺的 JavaScript 库,在 应用程序 和 node.js 自然环境中都能运转。
二、axios 与 fetch 的差别
1、不同之处:
都是能发出 http 允诺的 JavaScript 库。2、不同之处
fetch 是 JavaScript 原生植物库,应用程序都全力支持,无须加装间接采用;axios 并非原生植物库,须要加装就可以采用;fetch 根本无法在浏览器Escrow;axios 既能在应用程序、也能在node.js Escrow。3、其它
假如是 node.js 工程项目,利皮扬卡采用 axios.三、加装 axios
npm install axios
# 或
yarn add axios
四、第二种采用形式
间接初始化 axios 提供更多的 get 或 post 形式 发出 http 允诺。
1、GET 允诺
三种采用形式const axios = require(axios);
// 1、向取值ID的使用者发动允诺
axios.get(/user?ID=12345)
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
// 2、上述允诺也能按以下形式完成(可选)
axios.get(/user, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 总是会执行
});
全力支持async/await用法const axios = require(axios);
async function getUser() {
try {
const response = await axios.get(/user?ID=12345);
console.log(response);
} catch (error) {
console.error(error);
}
}
2、POST 允诺
单个 post 允诺const axios = require(axios);
axios.post(/user, {
firstName: Fred,
lastName: Flintstone
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
多个 post 允诺const axios = require(axios);
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 发出 get 或 post 允诺。
1、采用实例
const axios = require(axios);
// 1、发动一个post允诺
axios({
method: post,
url: /user/12345,
data: {
firstName: Fred,
lastName: Flintstone
}
});
axios({
method: get,
url: http://bit.ly/2mTM3nY,
responseType: stream
})
.then(function (response) {
response.data.pipe(fs.createWriteStream(ada_lovelace.jpg))
});
// 3、发动一个 GET 允诺 (默认允诺形式)axios(/user/12345);
// 4、自定义配置新建一个实例
const instance = axios.create({
baseURL: https://some-domain.com/api/,
timeout: 1000,
headers: {X-Custom-Header: foobar}
});
2、配置详细说明
url 是必填项;method 默认采用 get 允诺;
{
// `url` 是用于允诺的服务器 URL
url: /user,
// `method` 是创建允诺时采用的形式
method: get, // 默认值
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。 // 它能通过设置一个 `baseURL` 便于为 axios 实例的形式传递相对 URL
baseURL: https://some-domain.com/api/,
// `transformRequest` 允许在向服务器发送前,修改允诺数据
// 它根本无法用于 PUT, POST 和 PATCH 这几个允诺形式
// 数组中最后一个函数必须返回一个字符串, 一个Buffer实例,ArrayBuffer,FormData,或 Stream // 你能修改允诺头。
transformRequest: [function (data, headers) {
// 对发送的 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对接收的 data 进行任意转换处理
return data;
}],
// 自定义允诺头
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, 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 并提供更多一个有效的响应 (参见 lib/adapters/README.md)。
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 // 默认值
}