axios学习笔记
1.axios和ajax,fetch的区别
ajax:是在不重新加载页面的情况下，与服务器交换数据并更新部分网页,本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
fetch:是ajax的替代品，但fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象，fetch是基于promise设计的，代码结构比ajax简单多了。
优势：
1.语法简洁，更加语义化
2.基于标准 Promise 实现，支持 async/await
3.同构方便，使用 isomorphic-fetch
4.更加底层，提供的API丰富（request, response）
5.脱离了XHR
// 通过fetch获取百度的错误提示页面 get
fetch('https://www.baidu.com/search/error.html', {
method: 'GET'
})
.then((res)=>{
return res.text() // res.json();
})
.then((res)=>{
console.log(res)
})
// 通过fetch获取百度的错误提示页面 post
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
Axios:是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
优势：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
10.客户端支持防御 XSRF
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.axios的基本使用
get:获取数据
post:提交数据（表单提交及文件上传）
put:更新数据（提交所有数据)
patch:提交数据（提交修改的数据）
delete:删除数据
get使用
axios({
method: 'get',
url: '',
params: {}
}).then(res => {console.log('get使用')})
或者写成
axios.get(url,params).then(res => {console.log('get使用')})
post使用（patch用法类似）
post的请求头有一个content-type,该字段有两个值，一为form-data,一般用于表单提交（文件上传、图片上传等）;二为application/json,即传递json数据。
axios({
method: 'POST',
url: '',
data: {}
}).then(res => {console.log('post使用')})
或者写成
axios.post(url,data).then(res => {console.log('post使用')})
delete使用
axios({
method: 'DELETE',
url: '',
params: {}
}).then(res => {console.log('delete使用')}
3.并发请求
同时进行多个请求，并统一处理返回值，在进行业务处理时如果遇到需要同时依赖两个接口返回的数据，此时可以使用并发处理。
axios.all([
axios.get('url1'),
axios.post('url2')
]).then(
axios.spread((res1,res2) => {
console.log(res1,res2)
}) //用spread来分割返回值
)
4.axios深入学习
1)创建axios实例
//axios实例化
let api = axios.create({
baseURL: 'localhost:8080', //请求的域名
timeout: 3000, //设置请求时长
method: 'get,post',
headers: { //设置请求头
token: ''
},
params: {},
data: {}
})
//使用axios实例
api.get('/data.json')
2)axios配置
全局配置：如axios.defaults.timeout = 3000；
实例配置：创建axios实例时传入的配置，默认会使用全局配置；
请求配置：使用axios请求时，单独引入的配置。
优先级：请求配置 > 实例配置 > 全局配置
3)axios拦截器
请求拦截器：
axios.interceptors.request.use(
config => {}, //发送请求前的一些处理逻辑
err => {} //请求错误之后的处理
)
响应拦截器：
axios.interceptors.response.use(
res => {return res}, //请求成功之后对响应数据的处理
err => {return err} //响应错误后的处理
)
4)axios错误处理
axios.get('/data.json')
.then(callback)
.catch(err => {
console.log(err)
})
5)axios取消http请求
let api = axios.create({}) //实例化axios
let source = axios.CancelToken.source() //实例化一个source对象
api.get('/data.json',{
cancelToken: source.token //请求时携带cancelToken
}).then(callback).catch(err => {
console.log(err)
})
source.cancel('message') //调用source的cancel方法取消http请求，并将message以error的形式返回，然后就取消了http请求，并进入该请求的catch代码块，然后进行错误处理。
