1.安装与引入
- Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，官方文档
- 在HTML文件中引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//安装axios
npm install axios -S
//引入
import axios from 'axios'
2.基本使用
- axios()方法接收一个对象，在对象中指定请求方式和提交参数
<script>
//get请求参数
var query = {q:'vue',sort:"stars"}
//post请求参数
var data = {}
//token
var token = "xvcxvcxvcxv"
//发起请求
axios({
method:'get',//设置请求方法
baseURL:'http://127.0.0.1:80', //将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
url:'/test',//是用于请求的服务器 URL
//params:query,//适用于get方法 相当于在url后面拼接 ?wd=js
data:{},//post请求的数据
headers:{ //即将被发送的自定义请求头
'Authorization':token, //为请求添加token
'X-Requested-With': 'XMLHttpRequest', //Ajax 请求
},
timeout: 1000,//如果请求花费的时间了超过 `timeout` 的时间，请求将被中断,并触发catch
responseType: 'json', // 默认json
}).then(res => {
//成功回调
console.log(res)
}).catch(err => {
//失败回调
console.log(err)
})
</script>
| 参数 |
说明 |
| method |
请求方式，默认get |
| url |
请求地址 |
| params |
get请求的query参数，数据类型为对象类型 |
| data |
post请求的参数 |
| baseURL |
baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL |
| headers |
即将被发送的自定义请求头，例如token，数据类型为对象类型 |
| timeout |
指定请求超时的毫秒数，请求将被中断,并触发catch |
| responseType |
期望服务器响应的数据类型，默认json(标准格式就应该是json，即使是其他格式，也应该封装到json内) |
- 方法别名：将配置项中重要的3个参数(method,url,data)抽离出来，让代码更直观
axios.get(url[, config])
axios.post(url[, data[, config]])
3.响应结构
| 属性 |
说明 |
| data |
服务器提供的响应数据 |
| status |
HTTP 状态码 例如200 |
| statusText |
来自服务器响应的 HTTP 状态信息 例如 "OK" |
| headers |
服务器响应的头 |
| config |
当前请求的配置信息 |
4.并发
- 使用axios.all([promiase,promiase2])发起并发请求，待所有请求都回来后统一处理
<script>
new Vue({
el:"#app",
data: {
},
created(){
//直接读取返回结果
this.getAllData()
//使用spread处理返回结果
this.getAllData2()
},
methods: {
getAllData(){
//接收2个promise对象
axios.all([this.getData(), this.getData2()])
.then(function(resArr){
//返回结果放入数组中
console.log('res1',resArr[0].data)
console.log('res2',resArr[1].data)
})
},
getAllData2(){
//接收2个promise对象
axios.all([this.getData(), this.getData2()])
.then(axios.spread(function (res1, res2) {
// 两个请求现在都执行完成
console.log('res1', res1.data)
console.log('res2', res2.data)
}))
},
getData(){
//返回promise对象
return axios.get('http://127.0.0.1:8086/getDouble?val=5')
},
getData2(){
//返回promise对象
return axios.get('http://127.0.0.1:8086/getTriple?val=10')
}
}
})
</script>
5.配置默认值
//入口文件
import Vue from 'vue'
import axios from 'axios'
//统一配置接口域名
axios.defaults.baseURL = 'https://api.example.com'
//统一添加token
axios.defaults.headers.common['Authorization'] = window.localStorage.getItem("token")
//其他
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 2500
//创建实例
const instance = axios.create({
//默认配置
baseURL: 'https://api.example.com'
});
// 默认配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN
instance.defaults.timeout = 2500
//在vue中为了使所有的组件都能调用这个实例，可将其挂载到vue的原型链中
Vue.prototype.$ajax = instance
6.拦截器
- 含义：在请求或响应被 then 或 catch 处理前拦截它们，一般用于处理公共逻辑，例如请求时统一添加token，请求失败时统一弹窗提示等等
- 可以给axios本身添加拦截器，还可以给axios实例添加拦截器
- 注意：在响应拦截器中，请求失败(404,401,跨域)将执行第二个回调
//入口文件
import Vue from 'vue'
import axios from 'axios'
// 请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
config.headers.common['Authorization'] = window.localStorage.getItem("token")
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
// 未登陆或者登陆过期，跳转登陆页面
return Promise.reject(error);
});
