axios
它是一个类库,基于Promise管理的AJAX库
API
axios.get(url[,config]);
axios.post(url[,data[,config]]);
axios.request(config);
axios.delete(url[,config]);
axios.head(url[,config]);
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
基础操作
- 发送一个get请求
axio.get([url],[options]):向服务器发送一个请求,基于GET方式
axio.get('...',{
params:{
name:'xiaoming',
age:22
}
})
在get请求中会把params中的键值对拼接成urlencode格式的字符串,然后以问好传递参数的方式,传递给服务器,类似于JQ-AJAX中的DATA(或者自己基于URL后面拼接也可以,不用params)
- 发送一个post请求
axio.post():
axio.post('...',{
name:'xiaoming',
age:22
})
配置项中传递的内容都相当于基于请求主体传递给服务器,但是传递给服务器的内容格式是RAW(JSON格式的字符串),不是urlnicode格式字符串
基于GET和POST方法发送请求,返回的结果都是Promise实例
let promise = axios.get('...');//其他请求也差不多
promise.then(result=>{
console.log(result);
//result=>是一个对象
/**
config:基于AXIOS发送请求的时候的配置项
data:从服务器获取的响应主体内容
headers: 从服务器获取的响应头内容
request: 创建的AJAX的实例
status: 状态码
statusText: 状态码的描述
*/
}).catch(msg=>{
console.log(msg);//请求失败的原因
});
//常用写法
axios.get('...',{
params:{
lx:11
}
}).then(res=>{
let {data} = result;
//...
return axio.post('...');
}).then(result=>{
let {data} = result;
//...
});
- 一次性发送多个请求
//一个装有promise实例的数组
let sendAry = [axios.get('./json/data.json'), axios.get('./json/data.json'), axios.head('./json/data.json')];
axios.all(sendAry).then(result => {
//result => 一个数组,装有各个请求返回的数据
console.log(result);
});
axios.all(sendAry).then(axios.spread((resA, resB, resC) => {
//科里化函数思想
//resA,resB,resC分别代表三次请求的结果
console.log(resA);
console.log(resB);
console.log(resC);
}));
//当然,直接使用解构赋值更简单
axios.all(sendAry).then(result => {
let [resA, resB, resC] = result;
console.log(resA);
console.log(resB);
console.log(resC);
})
- 初始化一些常用的配置项
//=>全局默认配置
//设置默认路径
axios.defaults.baseURL = 'https://www.easy-mock.com/mock/temp';
//设置默认规则
axios.defaults.validateStatus = function (status){
//自定义成功失败规则:resolve 、 reject(默认以2开头算成功)
//自定义以2/3开头算成功
return /^(2|3)\d{2}$/.test(status);
};
//设置post请求中基于请求主体向服务器发送内容的格式,默认RAW,项目中常用的是urlencode格式
axios.defaults.transformRequest = data =>{
//data:请求主体中需要传递给服务器的内容
let str = ``;
for(let attr in data){
if(data.hasOwnProperty(attr)){
str += `${attr}=${data[attr]}&`
}
}
return str.substring(0,str.length-1);
};
//添加一个响应拦截器:分别在响应成功和失败的时候做一些拦截处理(在执行成功后设定的方法之前,先会执行拦截器中的方法,返回值传递给成功后设定的方法)
//可以设定一个拦截器,让其在执行成功方法是的参数直接为返回的响应的主体
axios.interceptors.response.use(result =>{
return result.data;
});
//=>这些不是公共的最好放到每次的请求里面
//设置超出时间
axios.defaults.timeout = 2000;
//设置请求头
axios.defaults.headers['Content-type'] = 'x-www-form-urlencode';
axios.defaults.params = {};
axios.defaults.data = {};
//在请求的config中配置相同属性名的,会覆盖前面配置的
封装ajaxPromise库
~ function(window) {
let _default = {
methods: 'GET',
url: '',
baseURL: '',
headers: {},
dataType: 'JSON',
data: null, //post系列请求基于请求主体传递给服务器的内容
params: null, //get系列请求基于问好传参传递给服务器的内容
cache: true
};
let ajaxPromise = function ajaxPromise(options) {
let {
methods,
url,
headers,
baseURL,
dataType,
data,
params,
cache
} = options;
//把传递的参数进一步处理
if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(methods)) {
//GET系列
if (params) {
url += `${ajaxPromise.check(url)}${ajaxPromise.formatData(params)}`;
}
if (cache === false) {
url += `${ajaxPromise.check(url)}_=${+(new Date())}`;
}
data = null; //GET系列请求主体什么都不放
} else {
//POST系列
data = ajaxPromise.formatData(data);
}
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(methods, `${baseURL}${url}`);
//如果和headers存在,我们需要设置请求头
if (headers !== null && typeof headers === 'object') {
for (let attr in headers) {
if (headers.hasOwnProperty(attr)) {
let val = headers[attr];
//判断值是否出现中文,若包含,则对其进行编码
if (/[\u4e00-\u9fa5]/.test(val)) {
val = encodeURIComponent(val);
}
xhr.setRequestHeader(attr, val);
}
}
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (/^(2|3)\d{2}$/.test(xhr.status)) {
//数据处理
let result = xhr.responseText;
dataType = dataType.toUpperCase();
dataType === 'JSON' ? result = JSON.parse(result) : (dataType === 'XML' ? result = xhr.responseXML : null);
resolve(result);
return;
}
reject(xhr.statusText);
}
};
xhr.send(data);
});
};
ajaxPromise.defaults = _default;
ajaxPromise.formatData = function(obj) {
let str = ``;
for (let attr in obj) {
if (obj.hasOwnProperty(attr)) {
str += `${attr}=${obj[attr]}&`;
}
}
return str.substring(0, str.length - 1);
};
ajaxPromise.check = function(url) {
return url.indexOf('?') > -1 ? '&' : '?';
};
//将默认配置暴露给用户,让用户可以自己设置一些基础的默认值(发送AJAX请求的时候按照用户配置的信息及进行处理)
//GET
['get', 'delete', 'head', 'options'].forEach(item => {
ajaxPromise[item] = function(url, options = {}) {
options = {
..._default, //默认值或者基于defaults修改的值
...options, //用户调取方法传递的配置项
url: url, //请求的URL地址(第一个参数,默认配置和传递的配置项都不出现URL,只能这样获取)
methods: item.toUpperCase() //执行时ajaxPromise.head执行,不会设置这个配置项,我们自己配置才可以
};
return ajaxPromise(options);
};
});
//POST
['post', 'put', 'patch'].forEach(item => {
ajaxPromise[item] = function(url, data = {}, options = {}) {
options = {
..._default,
...options,
url: url,
methods: item.toUpperCase(),
data: data
};
return ajaxPromise(options);
};
});
window.ajaxPromise = ajaxPromise;
}(window);