点击查看代码
<!-- axios基础用法 -->
<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系列请求传递给服务器的内容(会把parmas中的内容拼接为x-www-form-urlencoded这种格式，基于URL问号传参传递给服务器)
* paramsSerializer:传递参数的序列化
* timeout:超时时间
* withCredentials:跨域请求中是否允许携带凭证
* responseType:预设服务器返回结果，默认是JSON，支持BUFFER/TEXT/STREAM/DOCUMENT...
* validateStatus：AXIOS本身只有在HTTP状态码以2开头的时候才认为是成功，其余都认为是失败状态，当然我们可以自己来设置，基于validateStatus这个来修改
* ...
*/
//执行axios.xxx()都会返回一个promise实例，ajax请求成功会把实例的状态改为fulfilled，请求失败状态改为rejected；并且将获取的结果或者错误原因作为promise的value
// axios.get('http://127.0.0.1:5501/02-JavaScript/08%20%E8%AE%AD%E7%BB%83+%E7%9F%A5%E8%AF%86%E8%AF%A6%E8%A7%A3/21-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E4%BA%A4%E4%BA%92%E5%A4%84%E7%90%86/json/data2.json?_=' + Math.random(), {
// 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);
// });
axios.post('http://127.0.0.1:5501/02-JavaScript/08%20%E8%AE%AD%E7%BB%83+%E7%9F%A5%E8%AF%86%E8%AF%A6%E8%A7%A3/21-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E4%BA%A4%E4%BA%92%E5%A4%84%E7%90%86/json/data.json', {
lx: 1,
from: 'WX'
}, {
headers: {
//=>设置请求头信息
AAA: encodeURIComponent('哈哈哈')
},
transformRequest: function(data) {
if (!data) return;
let str = ``;
for (let key in data) {
if (!data.hasOwnProperty(key)) return;
str += `&${key}=${data[key]}`
}
return str.substring(1);
}
}).then(result => {
return result.data;
}).catch(reason => {
console.log(reason);
throw new Error(reason);
}).then(data => {
//=>data:从服务器获取的响应主体内容
console.log(data);
});
</script>
<!-- axios全局配置项 -->
<script>
/* 在使用AXIOS之前，我们一般都需要配置默认的配置项 */
// 1.基础URL，后期再发送请求的时候，URL请求地址最前面的公共部分就不需要再写了
axios.defaults.baseURL = "http://127.0.0.1:5501/02-JavaScript/08%20%E8%AE%AD%E7%BB%83+%E7%9F%A5%E8%AF%86%E8%AF%A6%E8%A7%A3/21-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E7%9A%84%E4%BA%A4%E4%BA%92%E5%A4%84%E7%90%86";
// 2.跨域请求中允许携带资源凭证（例如COOKIE信息）
axios.defaults.withCredentials = true;
// 3.设置请求头:POST系列中，我们传递给服务器数据的格式一般以x-www-form-urllencoded格式为主
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urllencoded';
// 4.设置请求拦截器(只对POST系列有用):把基于请求主体传递给服务器的内容进行拦截，把内容格式变为x-www-form-urllencoded这种格式，再传递给服务器
axios.defaults.transformRequest = function(data) {
if (!data) return;
let str = ``;
for (let key in data) {
if (!data.hasOwnProperty(key)) return;
str += `&${key}=${data[key]}`
}
return str.substring(1);
};
// 5.设置响应拦截器:[成功状态]把从服务器获取的结果中的响应主体信息获取到即可，[失败状态]手动把错误信息抛出异常
axios.interceptors.response.use(function(response) {
return response.data;
}, function(error) {
// return Promise.reject(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>
axios基本配置的相关教程结束。
