认识Axios

axios中文网

一. 为什么会诞生Axios

1. 最初浏览器页面向服务器请求数据时，返回的是整个页面，整个页面都会刷新
2. ajax的出现，它可以在页面无刷新的情况下请求数据
3. 原生的XMLHttpRequest，jQuery封装的ajax，以及axios都可以实现异步的网络请求
4. axios（相比于原生的XMLHttpRequest对象）简单易用，（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库
5. axios本质上是XMLHttpRequest的封装

二. Axios是什么

• axios是一个基于Promise的网络请求库，可以用于浏览器和node.js
• 简单来说就是可以发送get、post等请求
• vue、react等框架的出现，促使axios轻量级库的出现。因为vue、react等不需要操作dom，所以不需要引入jquery.js了

三. axios与ajax的区别

理论区别：

• axios是通过Promise实现对ajax的封装，就像jQuery对ajax的封装一样。ajax实现了页面局部的刷新，axios实现了对ajax的封装
• axios是ajax，ajax不止axios，即axios是ajax的衍生

逻辑区别：

• ajax 本身是一个针对MVC的编程
• axios符合现在前端MVVM的浪潮

axios的特点：

• 从浏览器创建XMLHttpRequest
• 从node.js创建http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

四. axios请求的五种方式（get，post，put，patch，delete）

注：使用axios记得先安装它的依赖，并导入，此处省略

• get：获取数据
• post：提交数据（表单提交+文件上传）
• put：更新数据（所有数据推送到后端）
• patch：更新数据（只将更新的数据推送到后端）
• delete：删除数据

// params 是将与请求一起发送的url参数，对应后台中的query
// data 是作为请求主体被发送的数据，对应后台中的body
axios.request(config)
axios.get(url[, config])  // 只支持 params 传参
axios.delete(url[, config])  // 只支持 params传参
axios.head(url[, config]) // 只支持 params传参
axios.post(url[, data[, config]]) // 同时支持  data 和 params
axios.put(url[, data[, config]]) // 同时支持  data 和 params
axios.patch(url[, data[, config]]) // 同时支持  data 和 params

使用方法：

1. get方法

<script>import axios from 'axios'export default {mounted () {axios.get('接口地址', {params: {}}).then((res) => {})}}
</script>

2. post方法

<script>import axios from 'axios'export default {mounted () {// 1.【参数为application/json请求方式】axios.post('接口地址', {}).then((res) => {})// 2.【参数为form-data请求方式的表单提交（图片上传/文件上传）】let data = { id: 12 }let formData = new formData()for (let key in data) {formData.append(key, data[key])}axios.post('接口地址', formData).then((res) => {})}}
</script>

3. put方法

<script>import axios from 'axios'export default {mounted () {axios.put('接口地址', {}).then((res) => {})}}
</script>

4. patch方法

<script>import axios from 'axios'export default {mounted () {axios.patch('接口地址', {}).then((res) => {})}}
</script>

5. delete方法

<script>import axios from 'axios'export default {mounted () {// 写法一axios.delete('接口地址', { params: {} }).then((res) => {})// 写法二axios.delete('接口地址', { data: {} }).then((res) => {})}}
</script>

五. axios拦截器的介绍

       1. axios拦截器的原理：

         网络请求 ——> axios ——> 请求拦截器 ——> 服务器

                                            ——> 响应拦截器 ——> 服务器

        2. 请求拦截器：主要处理token的统一注入问题

import axios from 'axios';
const axiosRequest = axios.create(); // 创建axios实例axiosRequest.interceptors.request.use(config => {// 有token修改token,没有token跳转登录if (store.getters.getToken !== '') {// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改if(!config.headers['Authorization']){config.headers['Authorization'] = store.getters.getToken; // getToken();}} else {if (config.url.charAt('/login?') == -1) {window.location = '/login';}}                return config}, error => {return Promise.reject(error)
})

        3. 响应拦截器：主要处理返回的数据异常和数据结构的问题

import axios from 'axios';
const axiosRequest = axios.create(); // 创建axios实例axiosRequest.interceptors.response.use(response => {if (response && response.data && response.data.code == '401') {store.dispatch("setToken", "");if (messagetimeout) {clearTimeout(messagetimeout)messagetimeout = null}messagetimeout = setTimeout(function () {this.$message({type: 'error',message: '认证失效，请重新登录!',duration: 1000,onClose: function () {}})setTimeout(() => {let routeData = router.resolve({path: '/login',})location.href= routeData.href;}, 500)}, 500)return Promise.reject(response.data)}if (response && response.data && response.data.code == '20007') {                        this.$message({type: 'error',message: '此用户已在其他地方登陆! ',duration: 1000,onClose: function () {window.location = 'login';}})return Promise.reject(response.data)}if (response && response.data && !response.data.success && !isMobile) {if (typeof response.data == 'object' && !(response.data instanceof Blob)) {this.$message({type: 'error',message: response.data.message})}}
},async error => {// error 有response对象 configif (error.response && error.response.data && error.response.data.code === 10002) {// 后端告诉前端token超时了await store.dispatch('user/lgout') // 调用登出actionrouter.push('/login') // 跳到登录页}this.$message.error(error.message) // 提示错误return Promise.reject(error) // 传入一个错误的对象  就认为promise执行链 进入了catch  
})

六. async、await

• async、await的用法

async getList () {let result = await axios.post('/getList', {id: 1})return result
}

• async、await是什么

        1. async是用来声明一个方法是异步的

        2. await可以认为是async await的简写，是等待一个异步方法执行完成的

• async、await的使用规则

1. async表示这是一个async函数，await只能用在async函数的里面，不能单独使用
2. async返回的是一个Promise对象，await是等待这个Promise返回结果后再执行
3. await等待的也是一个Promise对象，后面必须跟一个Promise对象，但不必写then()，直接就可以得到返回值