axios库
axios基础 :https://www.jianshu.com/p/df464b26ae58
是一个基于Promise封装的ajax库
服务端的内容 用的nodejs
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/',(req,res) => {
res.send('get');
});
app.get('/list',(req,res) => {
res.send('get list');
});
app.post('/post',(req,res) => {
res.send('post');
});
app.head('/head',(req,res) => {
res.send('head');
});
app.options('/options',(req,res) => {
res.send('options');
});
app.listen(8848,() => {
console.log('success');
});
常规用法
这个axios库提供了对应的请求的请求方法
比如axios.get()，axios.post()… get/post/head/put/options…
axios.get([url],[options]);
//第一个参数就是发送请求的地址/接口(api)
//第二参数是参数的配置项(就是需要传给服务器的信息 比如：ID什么的)
//get请求中，会把params中的减值对拼接成urlencode格式的字符串，然后以问号传递参数的方式传递给服务器 就是?key=value&key=value 格式
//当然不写配置文件 自己直接拼在api中也行
axios.get('ttp://127.0.0.1:8848/',{
params:{
name:'aaa',
age:9
}
});
//post 中 配置文件中传递的内容都相当于基于请求主体传递给服务器，但是传递给服务器的内容格式是RAM（JSON格式字符串），不是x-www-form-urlencoded
axios.post('ttp://127.0.0.1:8848/post',{
name:'aaa',
age:9
});
//基于get和post方法发送请求，返回的结果都是promise实例
let promise = axios.get('ttp://127.0.0.1:8848/',{
params:{
lx:12,
}
});
promise.then(res => {
console.log(res);//结果是个对象
//对象中有
//data(从服务器获得的响应主体内容) headers(从服务器获得的响应头信息)
//request(创建的ajax实例) status(状态码) statusText(状态码的描述)
//config(基于axios发送请求的时候做的配置项)
}).catch(msg =>{
//如果请求传递失败就走catch
console.log(msg);//打印的是请求失败的原因
})
一次并发多个请求
当需要在两个请求都完成的情况下才去执行某些代码
//1.
let resultA;
axios.get('A').the(resultA => {
return axios.get('B');
}).then(resultB => {
console.log(resultA,resultB)
//在这里就是在AB两个请求都成功的时候才会执行
//resultB是B成功的结果
//这种方法想要A请求的结果 只能将A的变量作为一个全局变量 不然访问不到
})
axios中提供了一种一次并发多个请求 all方法 这个方法就能实现在多个请求都完成时 做一些操作
let sendAry = [
axios.get('http://127.0.0.1:8848/'),
axios.get('http://127.0.0.1:8848/list'),
axios.post('http://127.0.0.1:8848/post'),
]
axios.all(sendAry).then(result =>{
console.log(result)//返回的是一个数组 每一个元素是一个请求结果
});
返回的结果
分别获得每个请求返回的内容
let sendAry = [
axios.get('http://127.0.0.1:8848/'),
axios.get('http://127.0.0.1:8848/list'),
axios.post('http://127.0.0.1:8848/post'),
]
//提供axios中的spread方法可以分别获每个请求的结果
let anonymous = axios.spread((resA,resB,resC) => {
console.log(resA,resB,resC);
});
axios.all(sendAry).then(anonymous);
//这里 先是all执行完 向then返回一个请求结果的数组
//then执行anonymous函数 函数内是spread方法
//spread会根据返回的请求结果的数组 分别将元素赋给他的第一个参数就是resA,resB,resC) => {})
返回的结果
