本文详细介绍了如何在 Vue.js 应用中使用 axios 进行 API 请求，包括全局配置、基本使用方法（GET、POST请求）、并发请求、以及通过配置对象进行请求。此外，还讨论了请求配置的详细选项，如URL参数、请求头、自定义实例默认值等。文章适合前端开发者了解和掌握 axios 的核心用法。
3、全局使用
//main.js
import axios from ‘axios’
Vue.prototype.$axios = axios
4、基本使用案例
执行get请求
// 为给定 ID 的 user 创建请求
axios.get(‘/user?ID=12345’).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get(‘/user’, {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
执行post请求
axios.post(‘/user’, {
firstname: ‘Fred’,
lastName: ‘Flintstone’
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
执行多个并发请求
function getUserAccount () {
return axios.get(‘/user/12345’);
}
function getUserPermissions () {
return axios.get(‘/user/12345/permissions’);
}
axios.all([getUserAccount(), getUserPermission()])
.then(axios.spread(function (acct, perms) {
// 两个请求都执行完成
}));
以上为基本使用，现在通过实例中实践一下
假如现在有某个接口（API），我们需要通过get请求调用，然后将返回数据渲染在页面上
api：https://api.apiopen.top/getJoke
入参：page=1、count=2、type=video
根据上面的基本使用案例可知，可以使用两种方式，接下来一一验证
1、URL地址参数拼接
由上面的api和入参可得拼接后的URL为：https://api.apiopen.top/getJoke?page=1&count=2&type=video（api后?将参数拼接，多个参数用&连接）
我是A组件
刷新页面，打开F12，切换到Network，发现此时页面发送了请求
切换到Console，查看控制台打印信息
我们已经成功获取接口的响应信息（返回值） ，数据结构为json格式，此时我们可以将想要的数据渲染到页面上，展开查看json数据
如我们想要将红色部分的信息渲染在页面上，此时可以对响应信息稍作处理
我是A组件
{ {result}}
页面显示效果
2、传入params对象形式
另外一种get请求的写法，使用params对象，将所传参数当成params对象的键值对传入。以下可达到相同效果
this.$axios.get(‘https://api.apiopen.top/getJoke’,{
params:{ //将URL地址拼接参数的形式换成传入params对象的形式
page:1,
count:2,</
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
