概念
Axios是-个基于promise的HTTP库，可以用在浏览器和node.js中。类似jq的ajax
axios是一个已经封装好的ajax的一个库
不支持jsonp
优点
- 从浏览器中创建XML HttpRequests
- 从node.js 创建http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF (跨站请求伪造)
挂载到Vue实例
- 可以把axios直接挂载Vue上，这样每个页面不用导入就可以直接用了
Vue.prototype.$http = axios
// 直接用this.$http就相当于axios
返回数据
config // 请求的时候附带的配置参数,method,url之类
data // 后端返回的数据
headers // 请求头里面包含发送给后端的格式application/json; charset=UTF -8
request // ajax请求
status // 返回的状态码
statusText // 返回的状态文字
使用步骤
- 安装
npm install axios --save
- 引入
import axios from 'axios'
- 可以在main.js文件里引入
- 也可以在需要用到的组件页面引入
- 挂载到Vue实例的prototype后就不用在引入了
- 指定配置信息
axios.请求方式('requestPath',{
data},{
配置信息 })
- 请求头信息
json
axios.请求方式('requestPath',{
data},{
headers:{
"Content-Type":"application/json" }})
字符串模式
axios.请求方式('requestPath',{
data},{
headers:{
"Content-type":"x-www-from-urlencoded" }})
表单
axios.请求方式('requestPath',{
data},{
headers:{
"Content-type":"multipart/form-data" }})
- get请求
axios.get('requestPath')
.then(res => {
})
- 传递参数
axios.get('requestPath',{
params:{
key=value
}
})
- post请求
axios.post('requestPath')
.then(res => {
})
- 传递参数与get请求一样
注意事项
- axios使用post发送数据时，默认是直接把传递的参数转换成json放到请求体中提交到后端的。也就是说，我们的Content-Type变成了application/json;charset=utf-8
，这是axios默认的请求头content-type类型。但是实际我们后端要求的’Content-Type’:
'application/x-www-form-urlencoded’为多见.这就与我们不符合。 - 在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端(-般是浏览器)如何解析响应的数据，比如显示图片,解析井展示htm|等等。
解决方法
- 引入qs库
import qs from 'qs'
- 不是每一个post传值都需要引入，具体和后台沟通
const 参数集合 = {
key=value,key=value }
axios.post('requestPath',qs.stringify(参数集合))
- 底层写法
axios({
url:'requestPath',
paramsL:{
参数 },
methodes:'请求方式',
// ...其他配置项
})
- 设置公共请求地址
- 在开发的时候和项目正式上线的时候用到的地址是不一样的 可以帮助我们方便的更改地址
- 其实就是把我们请求的地址分为域名地址和接口地址两个部分 设置一下公共的域名地址 请求的时候直接写接口地址即可
格式
axios.defaults.baseURL = '域名地址'
- 请求的时候这样写
axios.get('接口地址')
超时断开请求
- ajax在一直请求，只有当后端发送数据给前端，ajsx才会结束，这样会造成带宽的浪费 可以给ajax设置一个超时断开连接
- 比如说等待5s之后还是没有返回数据的话，就断开连接
- 设置
axios.defauls.timeout = 毫秒数
请求携带信息
token
- token是登陆的时候返回的token如果后端让在别的页面请求数据的是附带token
一般用户判断用户是否登陆是根据token进行判断的一般把这个token存在session里面
只要把toke写在请求头里面后端就知道我们登陆 - 登陆的时候保存sessionkey然后在请求其他接口的时候带上这个sessionkey sessionkey代表用户的身份当
- 我们请求数据的时候带上这个sessionkey那么后端就知道现在是谁在请求数据 还有些特殊的情况.登陆的时候后端会在本地设置cookie
token他会根据cookie里面的值token来判断用户是否 登陆
axios.defaults.headers.common['sessionKey']=登陆时后端返回的sessionKey
- 如果你每次请求接口需要验证，就加这个，不需要验证那就不用加
axios.defaults.headers.common['token'] = localStorage['token']
- 一般用于登陆注册
登陆成功之后，后台会返回一个sessionkey
保存一下
以后再请求其他接口的时候带上这个sessionkey
设置携带信息
axios.defaults.headers.common['token'] = 保存在本地的token
// 中括号里的token适合后台商量好的名字，不一定是token
拦截器
- 页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。好在强大的axios为开发者提供了这样一个API：拦截器。
- 可以在请求和相应的时候做一些特殊的处理
- 一般用于对数据的处理，或者在等待的时候给整个页面来一个遮罩层
例子
post请求的时候进对数据行序列化操作
axios.interceptors.request.use(function(config) {
if(config.method == 'post') {
config.data = qs.stringify(config.data)
}
return config
},function(error) {
return Promise.reject(error)
})
响应拦截器
axios.interceptors.response.use