Axios
参考链接：www.jianshu.com/p/7a9fbcbb1… 安装 npm init -y ：初始化一个配置文件； npm install axios --save ：生产依赖； npm install axios --save-dev ：开发依赖；
package.json ：配置文件；记录了该项目依赖了哪些模块；
下载axios之后，需要引入axios：
<script src="./node_modules/axios/dist/axios.js"></script>
axios基于promise用于浏览器和node.js的http客户端
特点
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
axios().then
axios会默认返回一个promise的实例；可以调用. then方法；
axios.get("index.css").then(function(data){
console.log(data);
}).catch(function () {
console.log(100);
})
可以看到我们请求的数据并不在data身上，被重新包装了，data.data才是我们请求的数据；
axios.get("index.css").then(function(data){
console.log(data.data);
}).catch(function () {
console.log(100);
})
axios请求的数据a，会把服务器返回的数据放在a的data属性上； 如果数据请求失败会执行catch；
axios请求
axios默认get请求；
// 发起一个GET请求（GET是默认的请求方法）
axios('/user/12345');
axios.get
axios.get("index.css").then(function (a) {
// axios请求到的数据，会把服务器返回的数据放在a的data属性上；
console.log(a.data); //a是一个对象
return axios.get("/login.css");
}).then(function(data){
//第二个.then会受上一个.then中return的axios.get("/login.css")结果的影响；axios.get("/login.css")请求成功会执行/第二个.then；失败就直接执行catch；
}).catch(function () {
console.log(100);
})
axios.post
axios.post("index.css")
axios.all
同时发生的请求 一下两个用来处理同时发生多个请求的辅助函数 axios.all(iterable) axios.spread(callback)
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
//axios.all的参数是一个数组；
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {}) );
axios传参
get请求的传参
params：参数；其属性值是一个对象；用于请求传递参数
axios.get("index.css",{params:{user:"a"}}).then(function (a) {
console.log(a.data);
})
post请求的传参
axios.post("index.css",{user:"a",password:123}).then(function (a) {
console.log(a.data);
}).catch(function () {
console.log(100);
})
axios api
可以通过导入相关配置发起请求
axios({
method:'post', //ajax中请求类型使用的是type；
url:'http://bit.ly/2mTM3nY',
data：{
username:"aaa",
password:123
}
}).then(function(response) {
});
axios.creat()
每次请求都创建一个新的实例
var instance = axios.create({
baseURL: 'https://some-domain.com/api/', //基础路径
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
axios配置基础路径
axios.defaults.baseURL = 'https://api.example.com';
axios.get("index.css").then(function () {
})
//会拼成https://api.example.com/index.css
配置优先级
配置项通过一定的规则合并，request config > instance.defaults > 系统默认，优先级高的覆盖优先级低的。
// 创建一个实例，这时的超时时间为系统默认的 0
var instance = axios.create();
// 通过instance.defaults重新设置超时时间为2.5s，因为优先级比系统默认高
instance.defaults.timeout = 2500;
// 通过request config重新设置超时时间为5s，因为优先级比instance.defaults和系统默认都高
instance.get('/longRequest', {
timeout: 5000
});
拦截器interceptors
axios.interceptors.request.use()
可以在then和catch之前拦截请求和响应。
// 请求拦截
axios.interceptors.request.use(function (config) {
// 当发送请求之前，会先执行这个函数；
// 每当发送一个请求，都会拦截一次；
console.log(100);
return config;
})
axios.get("index.css").then(function () {
console.log(200);
})
axios.post("index.css").then(function () {
console.log(300);
})
//输出的结果为100 100 300 200；
当post请求和get请求同时存在时，先执行post请求，再执行get请求；
原因：post请求比get请求快，都是异步的，post请求的时间先到，所以先执行post请求；
如果之后想移除拦截器你可以这么做
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
你也可以为axios实例添加一个拦截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
取消请求
可以通过cancel token来取消一个请求； CancelToken.source
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
//取消请求
source.cancel('Operation canceled by the user.');
fetch
fetch是window中的一个属性名，其属性值是一个可以发请求的函数； Fetch 还利用到了请求的异步特性——它是基于Promise的。 fetch ： 默认调用的是get请求；
fetch("package.json",{
method:"post",
body:JSON.stringify({a:1,b:2}), //body必须传字符串
headers:{ //设置请求头
'content-type':'x-www-form-urlencoded'
},
credentials:'include'
}).then(function (res) {
// res.json()同样会返回一个promise实例；继续.then才能获取其数据；
return res.json();
}).then(function (data) {
console.log(data);// 需要访问的数据；
})
调用fetch函数，传入接口url，然后返回一个promise，为了获取JSON的内容，我们需要使用 json()方法，这个方法返回的也是一个promise；
fetch的参数
- method：HTTP请求方式，默认为get请求；string格式；
- body：HTTP的请求参数；string格式；
- headers：HTTP的请求头，默认为{}；object格式；
- credentials：默认为omit，忽略的意思，也就是不带cookie；还有两个参数，same-origin，表示同源请求带cookie；include表示无论跨域还是同源请求都会带cookie；
注意：get请求不能设置body，只能通过问号传参的方式；
浏览器对Fetch的支持度不好，可以基于babel的最新语法解析包，把其进行解析，想要兼容性好一些，需要使用“fetch pollyfill”
async await
async函数是ES6的新语法；使得异步操作变得更加方便。
使用关键字async来表示，在函数内部使用await来表示异步。
async函数中如果没有await,那么和普通函数一样的； 一旦加了await；那么await下面的代码就是异步的；
