特点
支持node端和浏览器端
支持Promise
使用
npm
npm install axios
cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET请求
server
app.get("/user", (req, res) => {
console.log(req.query);
res.send("alert(1)");
})
axios.get(url) 方法一
<body>
<button id="btn">发送</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</body>
// response.data:返回的数据
// response.headers:响应头
// response.status:状态码
// response.statusText:状态信息
服务端返回值
app.get("/user", (req, res) => {
console.log(req.query);
// { ID: '12345' }
res.send("alert(1)");
})
axios.get(地址,{params:{}}) 方法二
- get请求,如果查询字符串写在外边 需要配置在第二个参数对象中,params:{}
<body>
<button id="btn">发送</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {
axios.get('/user', {
params: {
ID: 77777
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</body>
服务端返回值
app.get("/user", (req, res) => {
console.log(req.query);
//{ ID: '77777' }
res.send("alert(7)");
})
POST请求
server
app.use(express.static("./public"));
//获取post请求体 挂载到req上 只能处理urlencoded编码格式的请求
app.use(express.urlencoded({
extended: true
}))
//获取post请求体,并挂载到req上 只能处理json字符串格式的请求
app.use(express.json());
axios.post(地址,{})
<body>
<button id="btn">发送</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {
axios.post("/user", {
name: "rolls",
age: 777,
test:000
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</body>
server返回值
app.post("/user", (req, res) => {
console.log(req.body);
// { name: 'rolls', age: 777 }
res.send("alert(2)");
})
{ name: 'rolls', age: 777 }
axios原生
get
<body>
<button id="btn">发送</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {
axios({
method: "get",
url: "/user",
params: {
name: "G500",
age: 280,
w:777
}
}).then((data) => {
console.log(data)
})
}
</script>
</body>
POST
<body>
<button id="btn">发送</button>
<script>
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {
axios({
method:"post",
url:"/user",
data:{
name:"库里南",
age:640,
mon:123
}
}).then((data) => {
console.log(data)
})
}
</script>
</body>
axios.create()
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script>
// axios.create({})返回一个新的instance(和axios功能非常相似,但不完全一样,没有取消那些之后添加的方法(源码解析))
const instance = axios.create({
// 基础路径(发送请求的默认路径),一键修改所有地址方便开发
baseURL: "http://localhost:3000",
headers: {
// 请求头
},
timout: 20000, //请求超时时间ms,发送请求这个时间之后还没响应就中断这个请求
});
instance({
method: "GET",
url: "/comments",
});
</script>
拦截器
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script>
// create方法设置一些公共的或者默认的参数,将来发请求就会统一携带上
const instance = axios.create({
baseURL: "http://localhost:3000",
headers: {
// 请求头,公共的
},
timout: 20000,
});
// 拦截器,拦截请求,拦截器本质上就是一个中间件,帮你把数据处理一下
// 请求拦截器
/*
请求拦截器:在发送请求之前触发,一般只设置成功
*/
instance.interceptors.request.use(
// 成功
(config) => {
// config 请求相关的配置(请求地址,请求方式,请求头,请求体)
//修改请求的配置 token不会自动保存携带,固定格式,不在这些就要在每一个请求中去写headers
/* if (token) {
// 不写在上面的原因是因为他有可能有有可能没有,这样的参数写在这
config.headers.authorization = `Bearer ${token}`;
} */
// 必须return这个配置,否则发请求就没有配置了
return config;
}
// 失败
// () => {}
);
/*
响应拦截器:在响应返回来之后触发,readystate = 4说明响应回来了
*/
instance.interceptors.response.use(
// 成功 状态码2xx成功
(response) => {
// 状态值代码响应成功,并不代表功能成功
/*
response.data是响应数据
{
code:10000, // 代表功能成功
data:{username:xxx}
},
{
code:10001, // 代表功能失败
message:"用户名或密码错误"
}
*/
if (response.data.code === 10000) {
//response.data以后成功的值就直接是数据,不再需要.data
// 代表成功,返回真正的数据,触发then方法
return response.data.data;
} else {
// 代表失败---将来会触发catch
return Promise.reject(response.data.message);
}
},
// 失败 非2开头
(error) => {}
);
instance({
method: "GET",
url: "/comments",
// headers: {
// authorization: "Bearer ${token}",
// },
})
.then((value) => {
console.log(value);
})
.catch(() => {});
</script>