axios

1.axios是什么

• 一个基于promise的HTTP库 , 可以用在浏览器和node.js中

• 从node.js创建http请求

• 支持Promise API

• 转换请求数据和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防御XSRF/CSRF

• 批量发送多个请求

 

简单拓展:

• XSRF/CSRF :一种网络攻击方式 , 跨站域请求伪造 ,伪装受信任用户的请求进行资料窃取 , 07年左右出现曾列为互联网十大安全隐患之一

 

2.axios封装

为什么要封装?

• 如果不封装 , 在api层混入到业务层,造成代码混乱

• 例如 axios.post()直接写在vue文件中, 上线会转换为html , 会存在安全问题

封装方案一

在main.js导入

//引入axios，并加到原型链中
import axios from 'axios'
Vue.prototype.$axios = axios;
import Qs from 'qs'
Vue.prototype.qs = Qs

 

不建议以上原因如下:

• 直接挂载在Vue原型上 , 会污染原型 , 每次new Vue 无论用不用axios , 都会自动挂载到原型 , 在性能上有影响

• axios定位是http工具库,作为前后端交互的接口层, 与业务无关 , 不应该与this相关联

 

axios常用语法

　　axios(config)：通用 / 最本质的发任意类型请求的方式

　　axios(url[,config])：可以只指定url发get 请求

　　axios.request(config)：等同于axios(config)

　　axios.get(url[,config])：发get请求

　　axios.post(url[,config])：发post请求

　　axios.delete(url[,config])：发delete请求

　　axios.put(url[,config])：发put请求

 

　　axios.defaults.xxx ：请求的默认全局配置

　　axios.interceptors.request.use()：添加请求拦截器 （先添加后执行）

　　axios.interceptors.response.use()：添加响应拦截器　

       axios.defaults.withCredentials = true; //解决跨域是否携带凭证

　　axios.create([config])：创建一个新的axios（它没有下面的功能）

　　

       axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //设置post请求头

　　axios.defaults.headers.get['Content-Type'] = 'application/json;chartset=utf-8'; //设置get请求头

　　config.headers['token'] =我是token //设置请求头携带token　

　　  config.headers.Authorization =我是token //设置请求头携带token

　　axios.Cancel()：用于创建取消请求的错误对象

　　axios.CancelToken()：用于创建取消的token对象

　　axios.isCancel()：是否是一个取消请求的错误

　　axios.all(promises)：用于批量执行多个异步请求 

　　axios.spread()：用来指定接收所有成功数据的回调函数的方法

 github文档地址：https://github.com/axios/axios