Axios---axios的用法详解

一、axios的基本特性

axios (官网: https://qithub.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征: 

①支持浏览器和node.js

②支持promise
③能拦截请求和响应

④自动转换JSON数据
 

二、axios的基本用法

axios.请求的方式 ( '请求地址' )
.then (res=>{
//data属性名称是固定的，用于获取后台响应的数据

console.log(res.data)
} )
 

三、axios常见的请求方式(/data表示请求地址)

1、get : 查询数据

①不带参数的get请求

axios.get('/data')
.then(res=>{
//data属性名称是固定的，用于获取后台响应的数据

console.log(res.data)
} )
 

②带参数的get请求

1.参数在请求的路径中(通过问号传值携带参数)

axios.get('/data?id=123')
.then(res=>{
//data属性名称是固定的，用于获取后台响应的数据

console.log(res.data)
} )
 

2.参数在请求的路径中（参数直接放在请求的路径中） 

axios.get('/data/123')
.then(res=>{
//data属性名称是固定的，用于获取后台响应的数据

console.log(res.data)
} )
 

3.通过params对象传递参数

axios.get('/data',{
params : {
id: 123
}
})
.then(res=>{
console.log(res.data)})

2、post :添加数据

①通过对象的形式传递参数（默认传递的是json格式的数据）

axios.post('/data',{
uname: 'tom',
pwd: 123
}).then(res=>{
console.log(res.data)})

 ②通过URLSearchParams传递参数(application/x-www-form-urlencoded)

const params = new URISearlhParams();

params.append('param1','value1');

params.append('param2','value2');

axios.post('/api/test',params).then(res=>{
console.log(res.data)
})

3、put :修改数据

①参数传递方式与post类似

axios.put('/data',{
uname: 'tom',
pwd: 123
}).then(res=>{
console.log(res.data)})

4、delete :删除数据
 ①跟get方式类似

 1.参数在请求的路径中(通过问号传值携带参数)

axios.delete('/data?id=123')
.then(res=>{
//data属性名称是固定的，用于获取后台响应的数据

console.log(res.data)
} )
 

2.参数在请求的路径中（参数直接放在请求的路径中） 

axios.delete('/data/123')
.then(res=>{
//data属性名称是固定的，用于获取后台响应的数据

console.log(res.data)
} )
 

3.通过params对象传递参数(传递参数方式为字符串拼接时)

axios.delete('/data',{
params : {
id: 123
}
})
.then(res=>{
console.log(res.data)})

 4.通过data对象传递参数(传递参数需要为对象请求体的方式)

axios.delete('/data',{
data: {
id: 123
}
})
.then(res=>{
console.log(res.data)})

 

四、axios的响应结果

1.响应结果的主要属性

①data :实际响应回来的数据

②headers :响应头信息
③status :响应状态码
④statusText:响应状态信息
 

五.axios的全局配置

axios.defaults.timeout = 3000;//超时时间

axios.defaults.baseURL = 'http://localhost:3000/app';//默认根地址

axios.defaults.headers[ 'mytoken’ ]= ‘aqwerwqwerqwer2ewrwe23eresdf23’//设置请求头