axios 是 Vue 推荐的一款基于 Promise 的 AJAX 组件。所以我们在使用 Vue 进行项目开发时一般都使用这个库来执行 AJAX 请求。
发送请求
- axios.get(url[,config])：发送GET请求
- axios.post(url,data)：发送POST请求
- axios.put(url,data[,config])：发送PUT请求
- axios.delete(url[,config])：发送DELETE请求
- axios.options(url[,config])：发送OPTIONS请求
- axios.patch(url,data[,config])：发送PATCH请求
- axios.head(url[,config])：发送HEAD请求
- axios.request(config)：发送各种请求
Promise
Promise对象中提供了两个方法 then 和 catch：
- then：请求执行成功时调用
- catch：请求失败时调用
// 执行请求返回 Promise 对象
var ajax = axios.get('https://api.myjson.com/bins/nx1ge')
ajax.then((res)=>{
console.log( res.data ) // 返回的数据
console.log( res.status ) // 状态码
console.log( res.statusText ) // 状态码文本
console.log( res.headers ) // 响应的协议头信息
console.log( res.config ) // 请求的参数
console.log( res.request ) // 原生 XMLHttpRequest 对象
}).catch((err)=>{
// 发送了请求，并且成功，但服务器返回状态码不是2xx时执行
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
}
// 发送了请求，但服务器没有返回响应时执行
else if (error.request) {
// error.request 是原生的 XMLHttpRequest 对象
console.log(error.request);
}
// 发送请求时出错
else {
console.log('Error', error.message);
}
// 请求的配置项
console.log(error.config);
})axios配置
配置项 | 说明 |
|---|---|
url | 请求地址 |
method | 请求方法，默认是 default |
baseURL | 请求时的基地址 |
headers | 设置 HTTP 头信息 |
params | 请求时 URL 上的参数 |
data | 请求时提交的数据，主要在PUT、POST、PATCH时使用 |
timeout | 请求超时时间，单位：毫秒 |
responseType | 指明服务器返回数据的类型，默认是JSON |
onUploadProgress | 上传文件时处理上传进程的回调函数 |
onDownloadProgress | 下载时处理下载进度的回调函数 |
拦截器
在发送 AJAX请求前和处理AJAX响应前对数据进行拦截处理
代码语言：javascript复制// 在所有请求之前执行的代码
axios.interceptors.request.use(function (config) {
// 处理请求前代码
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 当服务器返回数据时执行的代码
axios.interceptors.response.use(function (response) {
// 请求成功时，拦截的代码
return response;
}, function (error) {
// 请求失败时，拦截的代码
return Promise.reject(error);
});
