学习java的第六天 Promise axios

最新推荐文章于 2024-06-27 19:13:37 发布
最新推荐文章于 2024-06-27 19:13:37 发布
阅读量304 收藏 5
点赞数 3
文章标签： 学习 java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu_wuw/article/details/136714160
版权

一.Promise的使用

语法上Promise是一个构造函数，用来封装异步操作并获取其成功或失败的结果

//异步编程解决方案:文件的读取、ajax等等
const fs =  require('fs')  //引入node.js中的本地文件扩展模块

//实例化Promise
//Promise有三个状态：初始化状态、成功、失败
//resolve函数类型的参数,可以将Promise的状态设置成功
//reject函数类型的参数,可以将Promise的状态设置失败
const p = new Promise((resolve, reject) => {
    //执行异步操作
    //第一个参数：读取文件的路径
    //第二个参数：读取过程中对相应结果的处理
    fs.readFile('./他.txt', (err, data) => {
        //当文件读取失败时的错误对象
        if(err) {
            //console.log('文件读取失败')
            //return
            reject(err) //可以将Promise状态改为失败

        }

        //当文件读取成功时的文件内容
        //onsole.log(data.toString())
        resolve(data)   //可以将Promise状态改为成功
    })
})

//p.then()  //当Promise的状态为成功时，then被调用
//p.catch()  //当Promise的状态为失败时，catch被调用
p.then((response) => {
    //成功业务逻辑
    console.log(response.toString())
}).catch((error) => {
    //失败业务逻辑
    console.log('读取失败\n' + error)
})

二.axios的使用

1.axios安装

新手入门 | Axios 文档 (nodejs.cn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <script>
        axios({
            url: 'http://127.0.0.1:8080/user/list',
            method: 'get',
        }).then((response) => {
            console.log('成功\n', response.data)
        }).catch((error) => {
            console.log('失败\n', error)
        })
    </script>
</body>
</html>

2.解决跨域问题

 

跨域原因示例
域名不同www.jd.com和www.taobao.com
域名相同端口号不同www.jd.com:8080和www.jd.com:8888
二级域名不同test1.jd.com和test2.jd.com

http和https也属于跨域

解决方式

1.在Controller层加@CrossOrigin注解 

package com.example.mybatisplus.controller;

import com.example.mybatisplus.entity.User;
import com.example.mybatisplus.service.UserService;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/user")
@CrossOrigin  //解决跨域问题
public class UserController {
    @Resource
    private UserService userService;

    @GetMapping("/list")
    public List<User> list() {
        return userService.list();
    }

}

另外axios有两种使用方式：方法调用、对象调用

<script>
        //方法调用
        axios({
            url: 'http://127.0.0.1:8080/user/list',
            method: 'get',
        }).then((response) => {
            console.log('成功\n', response.data)
        }).catch((error) => {
            console.log('失败\n', error)
        })

        //另一种：对象方式调用
        axios
        .get('http://127.0.0.1:8080/user/list')
        .then((response) => {
            console.log('成功\n', response.data)
        }).catch((error) => {
            console.log('失败\n', error)
        })
</script>

 3.自定义axios

3.1 配置实例

 //使用自定义配置
    const request = axios.create({
        baseURL: 'http://localhost:8080', //url前缀
        timeout: 1000, //请求超时时间
        headers: {'token': 'helen123'}  //携带令牌
    })

使用时：自定义名可代替axios使用，请求url前缀可省略

 <script>
         //使用自定义配置
        const request = axios.create({
            baseURL: 'http://localhost:8080', //url前缀
            //timeout: 1000, //请求超时时间
            //headers: {'token': 'helen123'}  //携带令牌
        })

        //方法调用
        request({
            url: '/user/list',
            method: 'get',
        }).then((response) => {
            console.log('成功\n', response.data)
        }).catch((error) => {
            console.log('失败\n', error)
        })

        //另一种：对象方式调用
        request
        .get('/user/list')
        .then((response) => {
            console.log('成功\n', response.data)
        }).catch((error) => {
            console.log('失败\n', error)
        })

    </script>

 三.拦截器

1.请求拦截

        //请求拦截
        request.interceptors.request.use(
            function(config) {
                console.log('config', config)
                //config.headers.mytoken = '修改令牌'
                //放行
                return config
            }, function(error) {
                return Promise.reject(error)
            }
        )

2.响应拦截

        //响应拦截
        request.interceptors.response.use(
            function(response) {
                console.log('response', response)
                //放行
                return response.data
            },
            function(error) {
                return response.reject(error)
            }
        )

四.模块化项目

 1.模块化规范

node.js中require引入模块，exports 导出模块

ES6模块化规范：export导出模块，import 引入模块

a.js文件

export  let str = '张三'   //单个导出

// export {str,...}     //一次性导出多个

 b.js文件

export  let str = '张三'

    <!--
        模块化解决的问题，javascript程序在全局空间内被污染的问题
    -->
    <script src="a.js"></script>
    <script src="b.js"></script>
    <script>
        console.log(str)
    </script>
    <!--解决上面代码导入覆盖问题-->
    <script type="module">
        import * as a from './a.js'
        import * as b from './b.js'

        <!--另一种导入模式,一次性导入多个，两个文件内属性重名时需规定别名-->
        import {str, stt} from './a.js'
        import {str as str1, sst} from './a.js'
    </script>

2.默认导入模块

js定义

export default {
    name: '李四',
    age: 30,
    code() {
        console.log('hello')
    }
}

 html应用

    <!--导入默认模块-->
    <script>
        import a1 from './a1.js'
    </script>

3.封装多个模块

将多个模块封装到一个模块

m.js

import * as a from './a.js'
import * as b from './b.js'
import a1 from './a1.js'

 html应用

<script src="m.js" type="module"></script>

wu_wuw
关注
《Vue3实战》第十一章 Axios，Vue里使用get、post请求
Java 技术专栏，从入门到精通，熟悉企业级开发
07-02 3060
使用Vue里的Axios，调用了get、post请求，已经4种后端跨域配置。
Vue第三天学习总结—— Vue全家桶之前后端交互(前后的交互模式、Promise用法、接口调用-fetch用法、接口调用-axios用法、接口调用-async/await用法 )
weixin_52819925的博客
08-27 600
(一) 前后的交互模式 之前处理的案例都是静态数据，而真正的项目都是需要后台提供真正的数据的 那么前台就需要通过后台提供的数据接口获取数据 1. 接口调用方式 原生ajax：比较麻烦，一般不用 基于jQuery的ajax：这个会简单点，但jquery侧重DOM操作，而Vue很少涉及DOM操作 fetch：ajax升级版，标准化组织制定的一套新规范 axios：第三方的库，比fetch更加强大 客户端与服务器通信方式 左侧为客户端，右侧为服务器 客户端通过互联网向服务器发起请求（寻求页面，数据）
Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求
Arya的博客，专注后端领域
06-10 1706
1.之前用jsp请求存在的问题，同步请求； 2.异步请求Ajax是啥； 3.axios的get和post方法，用axios实现异步请求； 4.vue框架的出现和入门
JavaWeb—Ajax(Axios)
夏日漱石的博客
04-02 540
JavaWeb—Ajax
19.JavaWeb-axios
LB_bei的博客
07-13 165
axios被用来前端与后端进行数据交互。
JavaWeb-10-Ajax、Axios
yelitoudu的博客
05-30 195
① 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list。// //浏览器访问任何地址都是以get方式访问的，所以直接使用浏览器访问该地址会报错404(请求失败)当客户端（浏览器）向服务器请求数据的时候，需要服务器响应数据给客户端之后，客户端才可以执行其他操作。当客户端（浏览器）向服务器请求数据的时候，客户端则不需要等待服务器响应结果，客户端可以执行其他操作。// 响应成功：以字符串形式返回响应数据。//（发送请求到服务端，加载数据）
Javaweb之Axios的详细解析
qq_69748833的博客
11-22 1853
前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。
vue 第四天 Promise用户；then参数；fetch接口调用方法；axios插件；async/await 用法
m0_55170432的博客
05-07 1212
1.1 接口调用方式 原生 ajax 基于 jQuery 的ajax fetch axios 这里可以返回一个完整的HTML页面；也可以只返回特定格式的数据，比如json 1.2 URL 地址格式 1. 传统形式的 URL 格式：schema://host:port/path?query#fragment schema：协议。例如http、https、ftp等 host：域名或者IP地址 port：端口, http默认端口80，可以省略 path：路径, 例如/abc/a/b/c query ：查
02 【axios fetch 跨域】
DSelegent的博客
10-28 543
02 【axios fetch 跨域】
学生管理-axios优化
weixin_49031153的博客
12-10 289
1.环境搭建 1.1 架构分析 注册中心：Nacos 网关：Gateway 后端基础框架：ssm 前端：Vue + SPA Axios（request.js） 1.2 数据库环境 1.2.1 学生数据库 #学生数据库 CREATE DATABASE nacos_ssm_student; USE nacos_ssm_student; CREATE TABLE tb_city( c_id VARCHAR(32) PRIMARY KEY COMMENT '城市ID', city_name VARC
java axios干啥用的_axios是干嘛的？
weixin_29369017的博客
02-26 1136
axios是什么？是干什么的？Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios：前端通信框架，因为vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要额外使用一个通信框架与服务器交互；当然也可以使用jQuery提供的AJAX通信功能。为啥选 axios ？在 Vue 的开发过程中能实现发送网络请求的方式有很多种，下面详细看...
Java Web 12.4 axios 12.4.1 基本使用
谢谢你们的关注
10-05 338
Java Web 12.4 axios 12.4.1 基本使用
【Java Web】Axios实现前后端数据异步交互
最新发布
想做职场小白吗? 我来教您.......
06-27 1096
若axios发送的是一个错误、异常的请求，请求拦截器方法2执行处理后，会直接响应给axios请求方法一个失败的Promise对象。后端服务器在处理正常的请求后，响应报文在返回给axios发送请求的调用函数之前会先经过响应拦截器，如果后端响应的是正常的报文则由响应拦截器的方法1处理响应报文后，将其返回给axios请求方法；axios是代替原生的ajax实现前后端数据交互的一套新解决方案，而axios使用的是promise相关的语法，而Promise主要是解决函数回调的问题。
axios java基本使用
webrx的博客
03-01 755
axios java基本使用
java axios干啥用的,一个简单的axios使用
weixin_34293588的博客
03-19 892
什么是axios？axios是基于promise的Http客户端，简单来讲就是可以通过axios来向后台发送请求，并在请求中做更多的可控功能！由于没有具体的翻译，个人理解的axios的名称由来：ajax i/o system文档网站axios的特点在浏览器中创建 XMLHttpRequests请求在node中发送http请求支持promise api拦截请求数据和响应数据取消请求自动转换为JSON...
Java全栈学习---后端---axios
weixin_51267250的博客
03-28 254
Java全栈学习资料前端 前端
Javaweb知识之AJAX(包含axios)
快乐学习
12-28 995
一、概念 1.概念： AJAX（Asynchronous JavaScript And XML）：异步的JavaScript和XML 2.AJAX的作用： 1.与服务器进行数据交换，通过AJAX可以给服务器发送请求，并获取服务器响应的数据。使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了 2.异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术（局部刷新），如：联想搜索、用户名是否可用校验，等等。 三、升级封装版（Axios） 概念 Axios
轻松掌握Axios：JavaWeb中使用Axios的基本技巧
2301_77478553的博客
07-17 627
说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
java中Ajax与Axios的使用
是程序喵呀
01-31 1343
=AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。==我们先来说概念中的JavaScript和XMLJavaScript表明该技术和前端相关；XML是指以此进行数据交换。而这两个我们之前都学习过。
ajax promise axios 的关系
03-16
ajax是一种技术，可以通过XMLHttpRequest对象向服务器发送请求并接收响应。promise是一种编程模式，可以让异步操作更加简洁和可读。axios是一个基于...因此，axios是在ajax和promise的基础上开发出来的一种工具。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值