什么是 Axios?
Axios
是一个基于 Promise
的 HTTP
请求客户端,用于浏览器和 Node.js
平台。它可以在浏览器和服务器之间通信,支持各种类型的请求和响应,包括 JSON
、XML
、URL
编码格式,也可以使用 Interceptors
实现请求和响应的拦截处理等功能。
Axios 的安装
可以通过 npm
安装 Axios
:
npm install axios
Axios 的使用
在 Vue
项目中,通常需要在 src/main.js
文件中引入 Axios
并设置全局默认的请求 baseURL
、请求头信息等:
import axios from 'axios';
// 设置 axios 全局默认配置
axios.defaults.baseURL = 'http://localhost:3000/api';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
Vue.prototype.$axios = axios;
在组件中可以通过 $axios
访问 Axios
,例如:
this.$axios.get('/users').then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
以上代码将发送一个 GET
请求到 /users
接口,并在响应完成后将响应数据输出到控制台中。
Axios 请求的基本配置
Axios
提供了多种配置选项,可以通过 axios.create()
方法将一组配置封装在一个实例中,也可以在每个请求中使用单独的配置。
发送 GET 请求
发送 GET
请求的最基本使用方法如下:
axios.get('/users').then(resp => {
console.log('GET api response:', resp.data);
}).catch(err => {
console.log(err);
});
发送 POST 请求
发送 POST
请求使用方法如下:
axios.post('/users', {
name: 'John',
age: 30
}).then(resp => {
console.log('POST api response:', resp.data);
}).catch(err => {
console.log(err);
});
axios.post()
方法用于发送 POST
请求,其接受两个参数:url
和 data
,其中 data
是请求 body
中的数据,config
是可选的。
其他请求方式
Axios
支持多种请求方式,例如 PUT
、DELETE
、PATCH
等,其使用方式与 GET
和 POST
请求类似,例如:
axios.put('/users', { name: 'John', age: 30 }).then(resp => {
console.log('PUT api response:', resp.data);
}).catch(err => {
console.log(err);
});
axios.delete('/users/1').then(resp => {
console.log('DELETE api response:', resp.data);
}).catch(err => {
console.log(err);
});
axios.patch('/users/1', { age: 31 }).then(resp => {
console.log('PATCH api response:', resp.data);
}).catch(err => {
console.log(err);
});
Axios 请求的配置选项
Axios
还提供了许多选项,可以根据需要进行配置。
baseURL
baseURL
是用于请求的服务器地址,可以用来设置全局的默认地址,例如:
axios.defaults.baseURL = 'http://localhost:3000/api';
这样,发送 GET
请求时,使用的服务器地址就是 http://localhost:3000/api
。
params
params
是发送请求时携带的 URL 参数,它可以是一个对象或 URL 参数字符串,例如:
axios.get('/users', {
params: {
name: 'John',
age: 30
}
}).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
data
data
是请求 body
中携带的数据,例如:
axios.post('/users', {
name: 'John',
age: 30
}).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
headers
headers
是请求头对象,它可以包含多种 HTTP
头信息,例如:
axios.post('/users', {
name: 'John',
age: 30
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
}
}).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
timeout
timeout
是请求超时时间,默认为 0
,表示无限制,可以设置一个非零的值来设置超时时间,例如:
axios.get('/users', {
timeout: 1000
}).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
withCredentials
withCredentials
是设置 XMLHttpRequest
请求是否允许携带 cookie
,默认为 false
,例如:
axios.get('/users', {
withCredentials: true
}).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
responseType
responseType
是响应数据类型,例如:
axios.get('/users', {
responseType: 'json'
}).then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
Axios
还提供了多种功能强大的选项,例如拦截器、取消请求、转换数据等。
Axios 拦截器
Axios
支持请求拦截器和响应拦截器,可以在发出请求之前或响应到达之前执行一些操作。例如,在请求时添加请求头或请求参数,在响应时更新响应数据或处理错误等。
请求拦截器:
axios.interceptors.request.use(config => {
// 在发出请求之前进行一些操作
config.headers.Authorization = 'Bearer ' + token;
return config;
}, error => {
// 处理请求错误
return Promise.reject(error);
});
响应拦截器:
axios.interceptors.response.use(response => {
// 在响应到达之前进行一些操作
return response;
}, error => {
// 处理响应错误
return Promise.reject(error);
});
以上代码是一个简单的请求拦截器示例,在发出请求之前将 Authorization
头信息添加到请求头中。以相同的方式,可以添加响应拦截器,并在响应到达之前更新响应数据或处理错误。
Axios 取消请求
Axios
可以取消请求,如果用户在发出请求之后取消了该请求,可以避免不必要的开销。
取消请求的最基本方法是使用一个取消令牌,例如:
const CancelToken = axios.CancelToken;
let source = CancelToken.source();
axios.get('/users', {
cancelToken: source.token
}).then(resp => {
console.log(resp.data);
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled:', err.message);
} else {
console.log(err);
}
});
// 取消请求
source.cancel('Operation canceled by the user.');
在使用 axios.get()
发送请求时,通过 cancelToken
选项指定取消令牌,然后使用 source.cancel()
取消请求。如果请求被取消,axios.isCancel(err)
将返回 true
,可以使用 err.message
输出取消原因。
Axios 转换数据
Axios
可以在请求与响应数据中进行转换,例如将 JSON
字符串转换为 JSON
对象、将 XML
转换为 JSON
、将 URL
编码字符串转换为 JSON
等。
指定请求和响应的转换器的方法如下:
axios.defaults.transformRequest = [function (data, headers) {
// 在向服务器发送数据之前,将其转换为 FormData 对象
if (headers['Content-Type'].indexOf('application/x-www-form-urlencoded') !== -1) {
return qs.stringify(data);
} else {
return data;
}
}];
axios.defaults.transformResponse = [function (data) {
// 将服务器响应的 JSON 字符串转换为 JSON 对象
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) { /* Ignore */ }
}
return data;
}];
在以上代码中,假设向服务器发送数据时使用 application/x-www-form-urlencoded
编码方式,将数据转换为 FormData
对象,并在响应数据到达时将 JSON
字符串转换为 JSON
对象。
总结
以上是 Axios
的全方位解析,我们学习了 Axios
的基础用法,如 GET/POST
请求、多种配置选项等,也学习了关键的部分,如拦截器、取消请求、数据转换等。
Axios
是一个非常流行的 HTTP
请求库,由于其易于使用的接口和强大的功能,它已经成为 Vue.js
和其他现代 JavaScript
应用程序开发的事实标准之一。