axios基础

最新推荐文章于 2023-03-27 22:06:55 发布
最新推荐文章于 2023-03-27 22:06:55 发布
阅读量90 收藏
点赞数
分类专栏： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45933638/article/details/113359686
版权

axios基础

中文文档网址

https://www.kancloud.cn/yunye/axios/234845/

b站教学视频
https://www.bilibili.com/video/BV1QA411b7TR?from=search&seid=14361311840975815082

注解@CrossOrigin—（解决跨域问题）

https://blog.csdn.net/zjy15203167987/article/details/77330992

axios基本使用

在这里插入图片描述
利用post请求时：关键字params作用实际上是地址拼接
在这里插入图片描述
post请求并不能用 data
post请求并不能使用data

简化写法

get 有参和无参请求

在这里插入图片描述
post请求:传递参数两种方式

一.直接进行值传递。
在这里插入图片描述
二. 进行对象传递。我们需要在控制器添加注解
在这里插入图片描述
在这里插入图片描述

并发请求

在这里插入图片描述

全局配置

在这里插入图片描述

js代码

//  配置请求的基准URL地址
axios.defaults.baseURL = 'https://api.example.com';
//  配置 超时时间
axios.defaults.timeout = 2500;
//  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios创建实例

为什么要创建实例

比如针对于不同的业务，各个模块的请求地址，类型不同。
把公共的部分封装到一起
在这里插入图片描述
在这里插入图片描述

拦截器

请求方向在这里插入图片描述
响应方向
在这里插入图片描述

axios在vue模块中的封装

王zming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios基础知识
qq_40231451的博客
10-10 757
文章目录前言一、axios发送数据的返回情况1、默认情况下，http状态码是2开始，则让promise状态成功2、自定义服务返回的HTTP状态码为多少是成功，为多少失败！！二、基于axios发送请求的方式1、axios([config]) 或者 axios([url],[config])2、axios.request([config])3、axios.get/delete/head/options([url],[config])4、创建axios 实例发起请求三、axios发送请求时候的配置项 config
Axios进阶指南：构建可靠的前端网络请求
会思想的苇草i的博客
01-31 4563
Axios是一种基于Promise的HTTP客户端，主要用于在前端开发中进行网络请求。它提供了简洁、直观的API接口，支持异步请求、拦截器、取消请求等功能。通过使用Axios，前端开发者可以轻松地与后端进行数据交互，获取和发送数据。Axios还具有跨浏览器的兼容性，并且易于集成到各种前端框架中。掌握Axios能够提高前端开发效率，实现更可靠的网络请求处理。
axios基础入门
dyk
08-15 856
axios基础入门json-server安装在当前文件下建立db.json启动 json-server结果 json-server JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。如果没有写后台返回数据可以用这个来模拟后台返回的数据 安装 npm install -g json-server 在当前文件下建立db.json { "result":{ "code":200, "msg"
axios入门基础
weixin_41325924的博客
03-11 1835
1.使用json-server的介绍与服务搭建 在线文档: https://github.com/typicode/json-server 下载: npm install -g json-server 目标根目录下创建数据库 json 文件: db.json { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" }, { "id": 2, "title": "json-server2", "author":
一文掌握 axios 基础
小R.的博客
02-09 3090
  最近在公司实习，又到我技术分享了，看了看大家之前分享的，一时想不到分享啥了，发愁ing…   突然想起来最初面实习时，被问过 axios，就来系统的学习一下啦，看有没有什么可以作为分享的，害。 一、axios 是什么   axios是一个基于promise的HTTP 网络请求库，可以作用于浏览器和 node.js中。它是 isomorphic的，即同一套代码可以运行在浏览器和node.js中。   在服务端它使用原生 node.js 的 http模块发送HTTP请求。   在客户端 （浏览器端）使用
axios基础语法，从小白到入门
01-27
axios 该资源仅供学习！！！ 该资源仅供学习！！！ 该资源仅供学习！！！ 该资源仅供学习！！！ 该资源仅供学习！！！
axios基础理解(小部分)
05-23
axios基础理解(小部分)
Vue3+Axios基础例子
11-06
Vue3+Axios基础例子
axios基础知识.js
03-08
axios基础知识.js
vue3+ts+less+vite+pinia+axios基础封装项目模版
最新发布
03-26
Vue 3 Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及Composition API等。使用Vue 3，开发者可以更加高效地构建用户界面，并享受更好的开发体验。...
Vue.js 中 axios 跨域访问错误问题及解决方法
10-17
主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
axios -- axios的基本使用 & axios其他方式发送请求 & axios请求响应结构分析
天行健 君子以自强不息，地势坤 君子以厚德载物。
09-05 511
1. axios的基本使用 页面结构: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> &l
axios的使用与跨域问题的解决
lovoo的博客
03-27 1万+
可以对axios进行配置，简化代码的编写//使用自定义配置baseURL: 'http://localhost:8080' , //url前缀timeout: 1000 , //超时时间headers: {'token' : 'helen123456' } //携带令牌 })
Axios(二)
Bella.的博客
12-23 1442
111
【网络请求之Axios】axios的基础用法
在热爱技术的路上一直前行。
06-11 1万+
代码： 结果： 代码： 结果： 结果： axios的返回值是一个Promise类型。代码： 结果： 结果： 注意：这里的请求体参数可以直接写在{}中，而不用加data 结果： 黑马vue视频，感谢llb老师。建议学习axios之前先了解一下http协议。...
前后端分离spring boot+vue跨域问题
qq_43568790的博客
02-05 432
当出现跨域问题时 在spring boot项目中创建一个类 如下 package com.demo2.demo.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; imp...
【axios】axios入门与源码分析
weixin_58214412的博客
03-08 2390
一.axios使用 1.json-Server服务搭建 2.axios的介绍与页面配置 3.axios的基本使用 4.axios其他方式发送请求 5.axios请求响应结果的结构 6.axios配置对象详细说明 7.axios的默认配置 8.axios创建实例发送请求 9.axios拦截器 10.axios取消请求 二.axios源码分析 11.axios文件结构说明 12.axios的创建过程详解 13.模拟实现axios对象的创建过程 14.axios发送请求过程详解
Axios解决跨域问题（Vue2版）
热门推荐
weixin_43565079的博客
09-13 6万+
什么是跨域 首先需要了解到浏览器的同源策略，同源策略是最核心也是最基本的安全功能，缺少同源策略浏览器的正常功能可能会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的能容进行交互。同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。 当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。 Vue中用Axios解决跨域问题 配置代理可解决使用Axios不能直接进行跨域...
axios基础用法
05-24
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持所有现代浏览器（包括 IE8+），同时也支持 Node.js 的最新版本。 以下是 Axios 的基础用法： 1. 安装 Axios： ``` npm install axios ``` 2. 引入 Axios： ``` import axios from 'axios'; ``` 3. 发送 GET 请求： ``` axios.get('/api/user') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 4. 发送 POST 请求： ``` axios.post('/api/user', { firstName: 'John', lastName: 'Doe' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 以上代码中，我们通过 Axios 发送了一个 GET 请求和一个 POST 请求。在请求中，我们可以使用 then() 方法来获取响应数据，也可以使用 catch() 方法来处理错误。 Axios 还提供了许多其他的 API，如 put()、delete()、head() 等等。另外，我们还可以设置请求头、请求参数、响应拦截器等等，以满足更加复杂的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值