Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CSDN 技术社区
skill_tree_vue
提交
2e515537
S
skill_tree_vue
项目概览
CSDN 技术社区
/
skill_tree_vue
通知
5
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
S
skill_tree_vue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
2e515537
编写于
5月 05, 2022
作者:
Z
zhaoss
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
2.5.2小节习题、关键字添加
上级
b473d8b9
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
262 addition
and
0 deletion
+262
-0
data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.json
data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.json
+8
-0
data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.md
data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.md
+254
-0
未找到文件。
data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.json
0 → 100644
浏览文件 @
2e515537
{
"type"
:
"code_options"
,
"author"
:
null
,
"source"
:
"exercises.md"
,
"notebook_enable"
:
false
,
"exercise_id"
:
"b96c67c2273849ec99e6fed0d48f091b"
}
\ No newline at end of file
data/2.Vue中阶/5.Axios/2.设置请求配置/exercises.md
0 → 100644
浏览文件 @
2e515537
# 设置请求配置
<div
style=
"color: pink;font-size:22px;font-weight:700"
>
小常识:
</div>
<br>
可以通过向 axios 传递相关配置来创建请求
```
javascript
axios
(
config
)
// 发送 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
'
))
});
axios
(
url
[,
config
])
// 发送 GET 请求(默认的方法)
axios
(
'
/user/12345
'
);
```
请求方法的别名
为方便起见,为所有支持的请求方法提供了别名
```
javascript
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
]])
```
注意
在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
并发
处理并发请求的助手函数
```
javascript
axios
.
all
(
iterable
)
axios
.
spread
(
callback
)
```
创建实例
可以使用自定义配置新建一个 axios 实例
```
javascript
axios
.
create
([
config
])
const
instance
=
axios
.
create
({
baseURL
:
'
https://some-domain.com/api/
'
,
timeout
:
1000
,
headers
:
{
'
X-Custom-Header
'
:
'
foobar
'
}
});
```
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。
```
javascript
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
]])
```
请求配置
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。
```
javascript
{
// `url` 是用于请求的服务器 URL
url
:
'
/user
'
,
// `method` 是创建请求时使用的方法
method
:
'
get
'
,
// default
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL
:
'
https://some-domain.com/api/
'
,
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest
:
[
function
(
data
,
headers
)
{
// 对 data 进行任意转换处理
return
data
;
}],
// `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse
:
[
function
(
data
)
{
// 对 data 进行任意转换处理
return
data
;
}],
// `headers` 是即将被发送的自定义请求头
headers
:
{
'
X-Requested-With
'
:
'
XMLHttpRequest
'
},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 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
// - 浏览器专属:FormData, File, Blob
// - Node 专属: Stream
data
:
{
firstName
:
'
Fred
'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间,请求将被中断
timeout
:
1000
,
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials
:
false
,
// default
// `adapter` 允许自定义处理请求,以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter
:
function
(
config
)
{
/* ... */
},
// `auth` 表示应该使用 HTTP 基础验证,并提供凭据
// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth
:
{
username
:
'
janedoe
'
,
password
:
'
s00pers3cret
'
},
// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType
:
'
json
'
,
// default
// `responseEncoding` indicates encoding to use for decoding responses
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding
:
'
utf8
'
,
// default
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName
:
'
XSRF-TOKEN
'
,
// default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName
:
'
X-XSRF-TOKEN
'
,
// default
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress
:
function
(
progressEvent
)
{
// Do whatever you want with the native progress event
},
// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress
:
function
(
progressEvent
)
{
// 对原生进度事件的处理
},
// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength
:
2000
,
// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
validateStatus
:
function
(
status
)
{
return
status
>=
200
&&
status
<
300
;
// default
},
// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0,将不会 follow 任何重定向
maxRedirects
:
5
,
// default
// `socketPath` defines a UNIX Socket to be used in node.js.
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// Only either `socketPath` or `proxy` can be specified.
// If both are specified, `socketPath` is used.
socketPath
:
null
,
// default
// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
// `keepAlive` 默认没有启用
httpAgent
:
new
http
.
Agent
({
keepAlive
:
true
}),
httpsAgent
:
new
https
.
Agent
({
keepAlive
:
true
}),
// 'proxy' 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy
:
{
host
:
'
127.0.0.1
'
,
port
:
9000
,
auth
:
{
username
:
'
mikeymike
'
,
password
:
'
rapunz3l
'
}
},
// `cancelToken` 指定用于取消请求的 cancel token
// (查看后面的 Cancellation 这节了解更多)
cancelToken
:
new
CancelToken
(
function
(
cancel
)
{
})
}
```
<br>
<div
style=
"color: #8E7CC3;font-size:22px;font-weight:700"
>
小测试:
</div>
观察下面几个配置项,下面描述中存在几处错误?
<br/>
baseURL 请求的域名,基本地址,类型:String
<br/>
timeout 请求超时时长,单位ms,类型:Number
<br/>
url 请求路径,类型:Object
<br/>
method 请求方法,类型:String
<br/>
headers 设置请求头,类型:Object
<br/>
params 请求参数,将参数拼接在URL上,类型:String
<br/>
data 请求参数,将参数放到请求体中,类型:Object
<br/><br/>
## 答案
两处
## 选项
### A
三处
### B
一处
### C
四处
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录