您的位置：首页 > 移动开发 > IOS开发

认识axios

2020-07-12 17:19 1161 查看

axios：一款基于PROMISE设计模式封装的AJAX库，可以用在浏览器和 node.js 中。（JQ中的AJAX就是最普通的AJAX库，没有基于PROMISE管理）。
axios中文文档：【http://www.axios-js.com/zh-cn/docs】

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<!-- IMPORT CSS -->
</head>

<body>
<!-- IMPORT JS -->
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
/*
* axios：一款基于PROMISE设计模式封装的AJAX库（JQ中的AJAX就是最普通的AJAX库，没有基于PROMISE管理）
*/
//=>axios.get([URL],[OPTIONS]);
// axios.get();
// axios.delete();
// axios.head();

//=>axios.post([URL],[DATA],[OPTIONS])：DATA通过请求主体传递给服务器的内容
// axios.post();
// axios.put();

/*
* OPTIONS
*   baseURL：基础的URL路径
*   transformRequest：处理请求参数（对POST系列有作用）
*   transformResponse：把返回的结果进行处理
*   headers：设置请求头
*   params：GET系列请求传递给服务器的内容（会把PARAMS中的内容拼接为X-WWW-FORM-URLENCODED这种格式，基于URL问号传参传递给服务器）
*   paramsSerializer：传递参数的序列化
*   timeout：超时时间
*   withCredentials：跨域请求中是否允许携带凭证
*   responseType：预设服务器返回结果的格式，默认是JSON，支持BUFFER/TEXT/STREAM/DOCUMENT...
*   validateStatus：AXIOS本身只有在HTTP状态码以2开头的时候才认为是成功，其余都认为是失败状态，当然我们可以自己来设置，基于validateStatus这个来修改
*   ......
*/

//=>执行axios.xxx()都会返回一个PROMISE实例，AJAX请求成功会把实例的状态改为FULFILLED/RESOLVED，请求失败状态改为REJECTED；并且获取的结果或者错误原因作为PROMISE的VALUE
/* axios.get('http://127.0.0.1:5500/json/data2.json', {
headers: {
AAA: encodeURIComponent('珠峰哈哈哈')
},
params: {
lx: 1,
from: 'WX'
}
}).then(result => {
//=>result：从服务器获取的结果
/!*
* CONFIG：我们自己配置的选项信息
* DATA：存储的是响应主体内容
* HEADERS：存储响应头的信息
* REQUEST：AJAX实例
* STATUS：响应状态码
* STATUS-TEXT：状态码的描述
*!/
return result.data;
}).catch(reason => {
console.log(reason);
throw new Error(reason);
}).then(data => {
//=>data：从服务器获取的响应主体内容
console.log(data);
}); */
</script>

<script>
/* axios.post('http://127.0.0.1:5500/json/data2.json', {
lx: 1,
from: 'WX'
}, {
headers: {
AAA: encodeURIComponent('珠峰哈哈哈')
},
transformRequest: function (data) {
if (!data) return data;
let str = ``;
for (let key in data) {
if (!data.hasOwnProperty(key)) break;
str += `&${key}=${data[key]}`;
}
return str.substring(1);
}
}).then(result => {
return result.data;
}).catch(reason => {
throw new Error(reason);
}).then(data => {
console.log(data);
}); */
</script>

<script>
/* 在使用AXIOS之前，我们一般都需要配置默认的配置项 */
// 1.基础URL，后期再发送请求的时候，URL请求地址最前面的公共部分就不需要再写了
axios.defaults.baseURL = "http://127.0.0.1:5500";
// 2.跨域请求中允许携带资源凭证（例如COOKIE信息）
axios.defaults.withCredentials = true;
// 3.设置请求头:POST系列中，我们传递给服务器数据的格式一般以x-www-form-urlencoded格式为主
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
// 4.设置请求拦截器（只对POST系列有用）：把基于请求主体传递给服务器的内容进行拦截，把内容格式变为x-www-form-urlencoded这种格式，再传递给服务器
axios.defaults.transformRequest = function (data) {
if (!data) return data;
let str = ``;
for (let key in data) {
if (!data.hasOwnProperty(key)) break;
str += `&${key}=${data[key]}`;
}
return str.substring(1);
};
// 5.设置响应拦截器：[成功状态]把从服务器获取的结果中的响应主体信息获取到即可，[失败状态]手动把错误信息抛出异常
axios.interceptors.response.use(function (response) {
return response.data;
}, function (error) {
throw new Error(error);
});
// 6.配置什么才算成功（把PROMISE状态改为FULFILLED）
axios.defaults.validateStatus = function (status) {
return /^(2|3)\d{2}$/.test(status);
}

// axios.get('/json/data2.json').then(data => {
// 	console.log(data);
// }).catch(reason => {
// 	console.log(reason);
// });

//=>Promise.all
let promise1 = Promise.resolve(100);
let promise2 = Promise.resolve(200);
axios.all([promise1, promise2]).then(results => {
let [val1, val2] = results;
console.log(val1, val2);
});
/* axios.all([promise1, promise2]).then(axios.spread(function (val1, val2) {
//=>axios.spread：把基于axios.all获取的结果一项项的单独获取到
console.log(val1, val2);
})) */
</script>
</body>

</html>

注：文章灵感来源于“珠峰培训”教学课程(http://www.zhufengpeixun.cn/)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航