什么是axios(写给小白的理解笔记)

0.为什么会诞生axios

最初浏览器页面向服务器请求数据时,返回的是整个页面,整个页面都会刷新,当我们只需要请求部分数据时,返回整个页面会造成网络资源的占用,为了提高数据请求效率,异步网络请求Ajax出现了,它可以在页面无刷新的情况下请求数据。jQuery封装的ajax,原生的XMLHttpRequest,以及axios都可以实现异步网络请求。

Axios(相比于原生的XMLHttpRequest对象来说) 简单易用,(相比于jQuery)axios包尺寸小且提供了易于扩展的接口,是专注于网络请求的库。(axios本质上是原生XMLHttpRequest的封装)

1.什么是Axios

Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js

Axios(相比于原生的XMLHttpRequest对象来说) 简单易用,(相比于jQuery)axios包尺寸小且提供了易于扩展的接口,是专注于网络请求的库。

2.axios发起GET请求

      2.1 axios发起GET请求的语法:
   

axios.get('url',{ params: { /*参数*/ } }).then(callback)

      2.2 axios发起GET请求的具体实例与基本使用

 

       

3.axios发起POST请求

     3.1 axios发起POST请求的语法:

axios.post('url', { /*参数*/ }).then(callback)

      3.22.2 axios发起POST的具体实例与基本使用

 

4.直接使用Axios发起请求 

axios 也提供了类似与jQuery中$.ajax()的函数,语法如下: 

4.1  axios直接发起GET请求的语法与实例:

 

 

4.1  axios直接发起POST请求的语法与实例:

 

 5.关于axios还有什么疑问吗?可以在评论区留言,希望有大神来回答~

  • 22
    点赞
  • 139
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
当然可以!Vue 3 是一种流行的 JavaScript 框架,用于构建用户界面。它具有响应式数据绑定、组件化开发和虚拟 DOM 等特性。TypeScript 是一种静态类型检查的 JavaScript 超集,可以增强代码的可读性和可维护性。Axios 是一个基于 Promise 的 HTTP 客户端,用于发送网络请求。 下面是一个使用 Vue 3、TypeScript 和 Axios 的示例代码,用于发送带有 Token 的请求: 首先,你需要安装 Vue 3、TypeScript 和 Axios。可以使用以下命令进行安装: ``` npm install vue@next npm install --save-dev typescript npm install axios ``` 然后,在你的 Vue 3 项目中创建一个组件,例如 `ApiComponent.vue`: ```vue <template> <div> <button @click="fetchData">Fetch Data</button> <div v-if="loading">Loading...</div> <div v-else-if="error">{{ error }}</div> <div v-else>{{ data }}</div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import axios from 'axios'; export default defineComponent({ data() { return { loading: false, error: '', data: '', }; }, methods: { fetchData() { this.loading = true; this.error = ''; this.data = ''; axios.get('https://api.example.com/data', { headers: { Authorization: `Bearer ${this.getToken()}`, }, }) .then(response => { this.data = response.data; }) .catch(error => { this.error = error.message; }) .finally(() => { this.loading = false; }); }, getToken() { // 在这里返回你的 Token return 'your_token'; }, }, }); </script> ``` 在上面的代码中,我们创建了一个 `ApiComponent` 组件,其中包含一个按钮和用于显示数据的区域。当点击按钮时,会触发 `fetchData` 方法,该方法使用 Axios 发送带有 Token 的 GET 请求。在请求头中,我们使用 `Authorization` 字段来传递 Token。 请注意,在 `getToken` 方法中,你需要替换 `'your_token'` 为你自己的 Token。 这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有所帮助!
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值