1、引用axios
文档地址：https://github.com/axios/axios
有以下几种安装引用方法，选择合适的方法即可。
1）使用npm
npm install axios
2）使用bower
bower install axios
3）使用yarn
yarn add axios
4）使用pnpm
pnpm add axios
5）使用CDN
或
2、配置和响应
1）响应格式
{ // `data` 是由服务器提供的响应的数据 data: {}, // `status` HTTP状态代码来自服务器响应 status: 200, // `statusText` HTTP状态消息来自服务器响应 statusText: 'OK', // `headers` 服务器响应的HTTP报头 // 所有header名称都是小写的，可以使用方括号访问。 // 例如: `response.headers['content-type']` headers: {}, // `config` 是请求提供给' axios'的配置 config: {}, // `request` 生成此响应的请求 // 它是node.js中的最后一个ClientRequest实例(在重定向中) // 也是浏览器中的一个XMLHttpRequest实例 request: {}}2）config配置
{ // `url` 是用于请求的服务器URL url: '/user', // `method` 发出请求时使用请求方法 method: 'get', // default // `baseURL` 将被放在'url'的前面，除非'url'是绝对的。 // 为axios的实例设置' baseURL '可以方便地将相对url传递给该实例的方法。 baseURL: 'https://some-domain.com/api/', // ' transformRequest '允许在请求数据发送到服务器之前更改它 //这只适用于请求方法'PUT'， 'POST'， 'PATCH'和'DELETE' //数组中的最后一个函数必须返回一个字符串或Buffer的实例，ArrayBuffer， //格式化数据或流 //可以修改头文件对象。 transformRequest: [function (data, headers) { // Do whatever you want to transform the data return data; }], // 'transformResponse'允许对响应数据进行更改 //传递给then/catch transformResponse: [function (data) { // 对数据进行任何转换 return data; }], // `headers` 是要发送的自定义头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // 'params'是随请求发送的URL参数 //必须是一个普通对象或URLSearchParams对象 params: { ID: 12345 }, // 'paramsSerializer'是负责序列化 'params'的可选配置。 paramsSerializer: { indexes: null // 数组索引格式(null -无括号，false -空括号，true -带索引的括号) }, // 'data'是作为请求体发送的数据 //只适用于请求方法'PUT'， 'POST'， 'DELETE， 'PATCH' //当没有设置' transformRequest '时，必须是以下类型之一: //字符串，普通对象，ArrayBuffer, ArrayBufferView, URLSearchParams //只有浏览器:FormData, File, Blob // - Node only: Stream, Buffer data: { firstName: 'Fred' }, //语法替代发送数据到主体 //方法后 //只发送值，不发送键 data: 'Country=Brasil&City=Belo Horizonte', // 'timeout'指定请求超时前的毫秒数。 // 如果请求时间超过"timeout"，请求将被中止。 timeout: 1000, // 默认是 `0` (不超时) // 'withCredentials'表示是否跨站访问控制请求 //应该使用凭证创建 withCredentials: false, // default // 'adapter'允许自定义处理请求，这使得测试更容易。 //返回一个承诺并提供一个有效的响应(参见lib/adapters/README.md)。 adapter: function (config) { /* ... */ }, // 'auth'表示应该使用HTTP Basic身份验证，并提供凭据。 //这将设置一个'Authorization'头，覆盖任何现有的 //使用'headers'设置的'Authorization'自定义头。 //请注意，只有HTTP基本认证可以通过该参数配置。 //对于Bearer令牌等，使用'Authorization'自定义头。 auth: { username: 'janedoe', password: 's00pers3cret' }, // responseType表示服务器将响应的数据类型 //选项有:'arraybuffer'， 'document'， 'json'， 'text'， 'stream' //仅浏览器:'blob' responseType: 'json', // default // 'responseEncoding'表示解码响应时使用的编码(仅限Node.js) //注意:对'stream'或客户端请求的'responseType'忽略 responseEncoding: 'utf8', // default // 'xsrfCookieName'是用来作为xsrf令牌值的cookie的名称 xsrfCookieName: 'XSRF-TOKEN', // default // 'xsrfHeaderName'是携带xsrf令牌值的http报头名称 xsrfHeaderName: 'X-XSRF-TOKEN', // default // ' onUploadProgress '允许处理上传的进度事件 // 仅浏览器 onUploadProgress: function (progressEvent) { // 对本机进度事件执行任何想要的操作 }, // 'onDownloadProgress'允许处理下载的进度事件 // 仅浏览器 onDownloadProgress: function (progressEvent) { // 对本机进度事件执行任何想要的操作 }, // 'maxContentLength'定义了node.js中允许的http响应内容的最大字节数 maxContentLength: 2000, // 'maxBodyLength'(仅限节点选项)定义了http请求内容的最大字节数 maxBodyLength: 2000, // 'validateStatus'定义了是否解析或拒绝给定的承诺 // HTTP响应状态码。如果'validateStatus'返回'true'(或设置为'null') //或'undefined')， promise将被解决;否则，承诺将是rejected。 validateStatus: function (status) { return status >= 200 && status < 300; // default }, // 'maxRedirects'定义了node.js中重定向的最大数量。 //如果设置为0，没有重定向将遵循。 maxRedirects: 21, // default // 'beforeeredirect'定义了一个将在重定向之前调用的函数。 //在重定向时调整请求选项 //检查最新的响应头 //或者通过抛出错误来取消请求 //如果maxRedirects设置为0，'beforeeredirect'是不使用的。 beforeRedirect: (options, { headers }) => { if (options.hostname === "example.com") { options.auth = "user:password"; } }, // `socketPath`定义了一个要在node.js中使用的UNIX Socket。 //'/var/run/docker.sock' 。向docker守护进程发送请求。 //只能指定' socketPath '或'proxy'。 //如果两者都指定，则使用'socketPath'。 socketPath: null, // default // 'httpAgent'和'httpAgent'定义了执行http时使用的自定义代理 //和HTTPS请求，分别在node.js中。这允许像这样添加选项 //默认情况下未启用的keepAlive。 httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy'定义代理服务器的主机名、端口和协议。 //也可以定义你的代理使用传统的' http_proxy '和 // 'https_proxy'环境变量。如果正在使用环境变量 //对于代理配置，也可以定义一个“no_proxy”环境 //变量作为一个逗号分隔的不应该被代理的域列表。 //使用'false'禁用代理，忽略环境变量。 //“auth”表示HTTP基本身份验证应该用于连接到代理，并且 //提供凭证。 //这将设置一个' Proxy-Authorization '头，覆盖任何现有的 //已经使用'headers'设置了'代理授权'自定义头。 //如果代理服务器使用HTTPS，那么必须设置协议为'HTTPS'。 proxy: { protocol: 'https', host: '127.0.0.1', port: 9000, auth: { username: 'mikeymike', password: 'rapunz3l' } }, // 'cancelToken'指定一个取消令牌，可以用来取消请求 //(详见取消部分) cancelToken: new CancelToken(function (cancel) { }), // 使用AbortController取消Axios请求的另一种方法 signal: new AbortController().signal, // 'decompress'表示响应体是否应该被解压 //自动。如果设置为'true'也会删除'content-encoding'头 //从所有解压缩响应的响应对象 //- Node only (XHR不能关闭解压) decompress: true // default // insecureHTTPParser 布尔类型。 //指定在哪里使用不安全的HTTP解析器，该解析器接受无效的HTTP头。 //这可能允许与不符合的HTTP实现互操作性。 //应该避免使用不安全的解析器。 //查看options https://nodejs.org/dist/latest-v12.x/docs/api/http.html#http_http_request_url_options_callback //参见https://nodejs.org/en/blog/vulnerability/february-2020-security-releases/#strict-http-header-parsing... insecureHTTPParser: undefined // default // 向后兼容性的transitional选项，可能在较新的版本中被删除 transitional: { //静默JSON解析模式 // 'true' -忽略JSON解析错误并设置响应。如果解析失败，数据为空(旧行为) // 'false' -抛出SyntaxError如果JSON解析失败(注意:responseType必须设置为'JSON') silentJSONParsing: true, // 当前axios版本的默认值 // 尝试将响应字符串解析为JSON，即使'responseType'不是'JSON' forcedJSONParsing: true, // 请求超时时抛出ETIMEDOUT错误而不是一般的ECONNABORTED错误 clarifyTimeoutError: false, }, env: { // 用于自动将有效负载序列化为FormData对象的FormData类 FormData: window?.FormData || global?.FormData }, formSerializer: { visitor: (value, key, path, helpers)=> {}; // 自定义访问者函数操作，用于序列化表单值 dots: boolean; // 用点代替括号格式 metaTokens: boolean; // 在参数key中保留{}这样的特殊结尾 indexes: boolean; // 数组索引格式为 null -无括号，false -空括号，true -带索引的括号 }}
3、执行get和post请求
1）执行get请求
const axios = require('axios').default;// Make a request for a user with a given IDaxios.get('/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .then(function () { // always executed });// Optionally the request above could also be done asaxios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .then(function () { // always executed }); // Want to use async/await? Add the `async` keyword to your outer function/method.async function getUser() { try { const response = await axios.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); }}或者
axios({ method: 'get', url: 'https://bit.ly/2mTM3nY', responseType: 'stream'}) .then(function (response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });
2）执行post请求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });或者
axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});为了方便起见，所有常见请求方法都提供了别名。如下，
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]])
4、设置请求的timeout超时时间
1）使用自定义创建并设置timeout时间
const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}});console.log("pre call")try{ await instance.post('/debug/throw') console.log("post call passed")}catch (err){ console.log("post call failed")}
2）设置全局timeout超时时间
axios.defaults.timeout = 30000;