IT评测·应用市场-qidao123.com技术社区

标题: 前端——Axios使用（一） [打印本页]

作者: 瑞星 时间: 2025-3-19 04:40
标题: 前端——Axios使用（一）

Axios的介绍
Axios的使用
步骤一：创建vue项目
步骤二：安装axios
步骤二：演示Axios的各种哀求方法（基本用法）
步骤三：演示Axios的实例与拦截器（进阶用法）
步骤四：Axios的封装
关键词：axios、发送哀求和接收数据、拦截器、封装
Axios的介绍

axios不是一种新技能，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。

Axios的使用

步骤一：创建vue项目

在命令提示符中输入vue ui打开图形化创建vue项目网站，在里面创建项目安装即可，用编译器打开。

vue ui

复制代码

下面是新建项目的目次结构：

项目创建完成后进入下一步安装axios
步骤二：安装axios

快捷键ctrl + `打开终端输入npm install axios

npm install axios

复制代码

axios安装成功如上图所示，查抄Axios是否安装进当前项目，可通过查看当前项目下的node_modules文件夹下面是否有axios，如下图所示

安装完成axios后，清空HelloWorld组件的代码，只留下框架，相应的app.vue也一样。
步骤二：演示Axios的各种哀求方法（基本用法）

get：一样平常用于获取数据

<template>
<div class="hello">
<button @click="ceshi()">
按钮
</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'HelloWorld',
props: {
},
methods:{
ceshi(){
axios({
url:'/db.json',
method:'get',
}).then(result=>{
console.log(result)
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
<style scoped>
</style>

复制代码

步调里面的db.json可以自行创建在public下，写一些json数据再来进行测试，主要目的是进行测试，至于为什么在public下写一个json代码，就可以在本地进行获取数据，这个可以大致明白为本身给本身提供数据，相当于后端就是本身的电脑

这只是测试的一个方法，没有后端提供数据确实不好测试，但是照旧有方法的，在Mock.js这个工具下就可以进行模仿数据，为前端提供测试场景
另外一种方法就是用其他公司提供的一些json格式的数据，例如https://hmajax.itheima.net/api/area，大家可以像这个网址发送get哀求，一样的可以获取数据，再发送之前先辈入网站看看json的内容是什么，保证axios.get哀求的正确性

methods:{
ceshi(){
axios({
url:'https://hmajax.itheima.net/api/area',
method:'get',
}).then(result=>{
console.log(result)
}).catch(error=>{
console.log(error)
})
}
}

复制代码

大概是因为里面的数据被他们删了吧，所以就获取到了这个，一样的说明你的axios发送了get哀求，而且正确的返回了结果

post：一样平常用于提交数据（表单提交与文件上传）

post哀求常用的数据哀求格式有三种：

Content-Type : application/x-www-form-urlencoded。ajax默认的数据格式。哀求体中的数据会以json字符串的情势发送到后端。
Content-Type : application/json ; charset=utf-8。axios默认的数据格式。哀求体中的数据会以平凡表单情势（键值对）发送到后端。
Content-Type : multipart/form-data 。它会将哀求体的数据处置惩罚为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

之所以要明白数据哀求格式是因为开辟人员根据接口文档来进行开辟，接口文档说需要哪种数据格式，就应该发送哪种格式，这样利于前后端同时开辟
下面是示例步调：与get哀求使用params差别的是，post哀求使用data属性

axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'Axios Test',
body: 'This is a test post',
userId: 1
}, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

patch：更新数据（只将修改的数据推送到后端（服务端））

axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
title: 'Updated Title'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

put：更新数据（所有数据推送到服务端）

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
title: 'New Title',
body: 'Updated body content',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

复制代码

delete：删除数据

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log('Deleted successfully');
})
.catch(error => {
console.error(error);
});

复制代码

步骤三：演示Axios的实例与拦截器（进阶用法）

使用Axios实例可以为每个哀求配置一些默认信息：

const apiClient = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
headers: {
'Content-Type': 'application/json'
}
});
apiClient.get('/posts')
.then(response => console.log(response.data))
.catch(error => console.error(error));

复制代码

步骤四：Axios的封装

可以封装一个本身的哀求模块，方便重复使用：

export const fetchPosts = () => {
return axios.get('https://jsonplaceholder.typicode.com/posts');
};
fetchPosts()
.then(response => console.log(response.data))
.catch(error => console.error(error));

复制代码

这种方式可以在开辟中进一步清晰地组织代码。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)