Axios是什么
Axios是一个基于Promise的网络请求库，作用于node.js和浏览器中。在服务端使用原生node.js http模块，在客户端使用XMLHttpRequest。是基于Promise对Ajax的封装。
Axios的特性
- 从浏览器创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API
- 拦截请求和相应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持抵御XSRF
安装
npm i axios
yarn add axios
Axios基本使用
使用前记得导入axios
发送GET请求：
axios.get('/user?id=1234').then(res => {console.log(res)}).catch(error => {console.log(error)}).then(() => {//总会执行})
注意传递参数的方式，路径后加’?'后拼接参数。还可以用另一种方式传递参数：
axios.get('/user',{params: {id: 1234}
}).then(res => {console.log(res)}).catch(error => {console.log(error)}).then(() => {//总会执行})
不在地址后面进行拼接，axios.get()这个方法第一个参数是要请求的路径，第二个参数是一个对象，可以在这个对象中加一些配置，参数就写在这里的params里面。也可以使用async/await：
async function getUser(){try{const res = await axios.get('/user?id=1234')console.log(res)}catch (error){console.error(error)}
}
注意要用一个函数包裹起来并在前面加上async，注意要使用try-catch捕获错误，注意await的位置。
POST请求/多请求
发送一个POST请求：
axios.post('/user',{firstname: 'qiling',lastname: 'wuxie'
}).then(res => {console.log(res)
}).catch(error => {console.log(error)
})
axios.post() 方法的第一个参数是请求的地址，第二个参数是一个对象，是要post的数据。
如果发起多个请求可以使用Promise.all。这个方法可以处理多个Promise:
function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}Promise.all([getUserAccount(), getUserPermissions()]).then(function (results) {const acct = results[0];const perm = results[1];});
注意Promise.all()接收的参数是一个Promise对象数组，后面.then接收到的结果也是一个数组，是一个由上面的Promise对象数组返回的结果构成的数组。
Axios实例
使用自定义配置新建一个实例:
const instance = axios.create({baseURL: 'http://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
})
axios.get()等方法都是实例方法。
请求配置
以下是创建请求时可以使用的配置。只有url是必须的。不指定method，请求就默认是GET
- url 请求的服务器的url
- method 创建请求时使用的方法
- baseURL 自动加在url前面
- transformRequest: [function(data, header) { return data }]发请求前修改请求数据，只能用于post，put，patch
- transformResponse: [function (data) { return data }] 传递给 .then/catch之前修改相应数据
- headers: {‘X-Requested-With’: ‘XMLHttpRequest’} 自定义请求头
- params: { id: 12345 } 设置与请求一起发送的URL参数，必须是简单对象
- data: { firstname: ‘qiling’ } 作为请求体被发送的数据
- timeout 指定请求超时的毫秒数
- proxy 定义代理服务器的主机名，端口，协议
- validatestatus: function (status) { return status >= 200 && status < 300; // 默认值 } 如果返回true就resolved,否则就是rejected
- cancelToken: new CancelToken(function (cancel) { }) 使用cancel token取消请求，cancel token由CancelToken.source()创建
响应结构
一个请求的响应包含以下信息：
{//服务器提供的响应data: {},//来自服务器响应的HTTP状态码status: 200,//来自服务器响应的状态信息statusText: 'OK',//服务器响应头headers: {},//axios请求的配置信息config: {},//生成此响应的请求，在浏览器中是XMLHttpRequest实例request: {}
}
使用.then 时将获得以下相应：
axios.get('/user/12345').then(function (response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});
数据，状态码，状态信息，响应头，请求的配置信息，生成此响应的请求。如果使用catch，相应可通过error对象被使用。
拦截器
在请求或响应在被then和catch处理之前拦截它们
添加请求拦截器：
axios.interceptors.request.use(function (config) {//在发送请求之前做什么return config
},function (error){//对请求错误做些什么return Promise.reject(error)
})
添加响应拦截器：
axios.interceptors.request.use(function (response){//2xx范围内的状态玛都会触发这个函数//对相应数据做些什么return response
}, function (error) {//超出2xx范围的状态码都会触发这个函数//对相应错误做些什么return return Promise.reject(error)
})
移除拦截器：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
自己定义的axios实例也可以添加拦截器：
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
错误处理
axios.get('/user/12345').catch(function (error) {if(error.response) {//请求成功且得到响应，但是状态码不是2xx....} else if(error.request){//请求成功，没得到响应//`error.request` 在浏览器中是 XMLHttpRequest 的实例....}else {//请求的发送出问题了console.log(error.message)}})
默认是超出2xx范围就错误，但是使用使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。
axios.get('/api',{//注意要把status作为参数传进去validateStatus: function (status) {return status < 500}
})
可以对error对象进行toJSON获取更多错误信息：
axios.get('/user/12345').catch(function (error) {console.log(error.toJSON());});
