class05：axios、跨域

最新推荐文章于 2024-08-03 09:00:00 发布

Laker 23

最新推荐文章于 2024-08-03 09:00:00 发布

阅读量289

点赞数 2

分类专栏： # Nodejs 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_51667621/article/details/125784574

版权

Nodejs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、js的axios

1. 引入axios

官网：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

axios是封装的原生ajax请求，Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

其源码可在BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务中查阅，BootCDN 是极兔云联合 Bootstrap 中文网共同支持并维护的前端开源项目免费 CDN 服务，致力于为 Bootstrap、jQuery、React、Vue.js 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。BootCDN 所收录的开源项目主要同步于 cdnjs 开源项目仓库。

引入：通过script引入axios源码，script的src可以引入网络上的代码：

在html文件的script标签中引入网址：

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>   // 没有压缩的版本-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script> // 代码压缩版本-->

区别：内存大小不一样空格都被压缩了，空格也是一个字符。

上述axios地址为BootCDN的axios源码网址，也可以使用axios官网的源码网址：

// 使用 unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 使用 jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

打印输出判断是否引入成功：

<script> console.log(axios) </script>

引入成功：
在这里插入图片描述

2. 使用axios获取网络数据

例：

如中职通api：http://music.zzhitong.com/

如获取数据的地址: music.zzhitong.com/search?keywords=海阔天空

keywords 关键词 => 值 => 根据这个值进行搜索内容

开始使用：

axios({
	method:"get",    //请求方式
	url:"请求数据的地址",
})
//get   一般是用于获取数据的
//post  一般是用于发送数据给后端

通过设置按钮事件打印输出axios：

// app.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>    
</head>
<body>
    <button id="r_get">get</button>
    <script>
        r_get.onclick=function(){
            console.log(axios({
                method:"get",
                url:"http://music.zzhitong.com/search?keywords=海阔天空", // 请求数据的地址
            }));
        }
    </script>
</body>
</html>

在这里插入图片描述
打印输出得到Promise，Promise在下一节讲解。

可以通过promise的**.then**的回调函数获取数据：

r_get.onclick=function(){
    axios({
        method:"get",
        url:"http://music.zzhitong.com/search?keywords=海阔天空", // 请求数据的地址
    }).then((res)=>{
        console.log(res);
    });
}

在这里插入图片描述

二、Promise

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值。

promise通过new启动，传入一个回调函数callback，该回调函数有两个形参，分别是resolve()成功函数和reject()失败函数，promise的成功或失败是由编程人员定义的。

打印输出promise：

<script>
    let promise = new Promise((resolve, reject)=>{

    });
    console.log(promise);
</script>

输出与上图中的axios的输出相同，都为promise，这是因为axios 里面封装了 promise：
在这里插入图片描述

js中的异步有：ajax，定时器，事件， promise的.then 等；

promise 用来处理异步，方便我们获取数据。

promise 有三个状态：等待状态pending、成功状态resolve、失败状态reject；默认为等待状态。

三、跨域

1.跨域错误

<script>
        axios({
            method:"get",
            url:"http://www.axios-js.com/zh-cn/docs/",
        }).then(result=>{
            console.log(result);
        })
</script>

在这里插入图片描述

错误原因： 我们开启的本地网络地址为：http://localhost:3000/，根据同源策略，协议(https，http )，域名 (www.xxx.com)，端口（默认80）三者完全相同才能进行访问。

示例： 下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：
在这里插入图片描述

2. 设置跨域

设置跨域一般由后端设置。

解决跨域错误，只需要在后端配置服务时设置响应头即可。

// res.setHeader  设置响应头
// "Access-Control-Allow-Origin","*"  允许任何人访问该数据
res.setHeader("Access-Control-Allow-Origin", "*");

创建服务器应用，模拟cors错误，设置跨域。

后端app.js：

const http = require('http');   //引入http模块，用于创建服务器应用

// 创建服务器应用
let serve = http.createServer((req, res) => {
    // req 前端发送给后端的内容
    // res 后端发送给前端的内容

    // console.log(req.url); //  req.url 获取前端请求的地址

    // res.setHeader  设置响应头
    // "Access-Control-Allow-Origin","*"  允许任何人访问该数据
    res.setHeader("Access-Control-Allow-Origin", "*");

    if (req.url == "/cors_test") {
        res.end("若非群玉山头见，会向瑶台月下逢。")
    }

});

// 启动监听端口号，我们应用运行的地址
serve.listen("3000", () => {
    console.log("开启3000端口服务")
});

前端发起请求app.html：

<body>
	<button id="test">get请求</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        test.onclick = function () {
            axios({
                method: "get",
                url: "http://localhost:3000/cors_test",
                // 获取数据的地址  请求数据的地址   不是文件的地址
            }).then(result => {
                console.log(result.data)
            })
        }
    </script>
</body >

访问结果：

在这里插入图片描述

若未设置跨域，即没有代码：

res.setHeader("Access-Control-Allow-Origin", "*");

则显示跨域错误：
在这里插入图片描述

Laker 23

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录