1. Axios request configuration
These are the configuration options available when creating a request. Only url is required. If not specified method, the request will default to GET the method used.
{
// `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` 表示跨域请求时是否需要使用凭证（是否携带cookie，false为不携带）
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 // 默认值
}2. axios default configuration
// 默认配置
axios.defaults.method = 'GET'; //设置默认的请求类型为GET
axios.defaults.baseURL = 'http://localhost:3000'; //设置基础URL
axios.defaults.params = {id:100};
axios.defaults.timeout = 3000;
btns[0].onclick = function () {
axios({
url: '/posts',
}).then(response => {
console.log(response);
})
}
3. axios creates an instance object and sends an ajax request
// 创建实例对象
const duanzi = axios.create({
// baseURL: 'https://api.apiopen.top',
baseURL: 'https://api',
timeout: 2000
});
duanzi({
url: '/getJoke',
}).then(response => {
console.log(response);
})4. axios interceptor
Interceptor: intercept requests or responses before they are processed by then or catch
<script>
//设置请求拦截器-1 config 配置对象
axios.interceptors.request.use(function (config) {
// 在发送请求前做些什么
console.log('请求拦截器 成功 - 1');
// 修改config中的参数
config.params = {a:100}
return config
}, function (error) {
// 对请求错误做些什么
console.log('请求拦截器 失败 -1');
return Promise.reject(error)
});
//设置请求拦截器-2
axios.interceptors.request.use(function (config) {
// 在发送请求前做些什么
console.log('请求拦截器 成功 - 2');
// 修改config中的参数
// config.timeout = 2000;
return config
// throw '参数出了问题'
}, function (error) {
// 对请求错误做些什么
console.log('请求拦截器 失败 -2');
return Promise.reject(error)
});
// 设置响应拦截器-1
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数.
// 对响应数据做点什么
console.log('响应拦截器 成功 -1');
console.log(response);
// return response
return response.data
},function(error){
console.log('响应拦截器 失败 -1');
return Promise.reject(error)
});
// 设置响应拦截器-2
axios.interceptors.response.use(function (response) {
console.log('响应拦截器 成功 -2');
return response
},function(error){
console.log('响应拦截器 失败 -2');
return Promise.reject(error)
});
// 发送请求
axios({
method:'GET',
url:'http://localhost:3000/posts'
}).then(response=>{
console.log('自定义回调处理成功的结果');
console.log(response);
}).catch(reason=>{
console.log('自定义失败的回调');
})
</script>5. Use axios to cancel the request
Since the service did not cancel the request in time when sending the request locally, the result has already been responded, so the effect of canceling the request cannot be seen now. Then they can make a delayed response on the server side. I am using json-server on the server side. I want to To make a delayed response, you can use the command line when starting the service: json-server --watch db.json --d 2000
Start the service in the terminal - delay 2s: json-server --watch db.json --d 2000
At this point the cancellation request is successful:
Problem: If the user keeps making requests
Result: Server pressure will become very high
Solution: When the user initiates a request, check whether the last request is still being sent. If the previous request is still being sent, cancel the previous request first and resend a new request.
<script>
// 获取按钮
const btns = document.querySelectorAll('button')
// 2. 声明全局变量
let cancel = null
// 发送请求
btns[0].onclick = function(){
// 检测上一次请求是否已经完成
if(cancel !== null){
// 取消上一次的请求
cancel()
}
axios({
method:'GET',
url:'http://localhost:3000/posts',
// 1. 添加配置对象的属性
cancelToken :new axios.CancelToken(function(c){
// 3. 将c的值复制给cancel
cancel = c
})
}).then(response=>{
console.log(response);
// 将cancel的值初始化
cancel =null
})
}
// 绑定第二个事件 取消请求
btns[1].onclick = function(){
cancel()
}
</script>