前端与后台交互之axios（get请求）

最新推荐文章于 2024-08-15 01:46:54 发布

未LIVE

最新推荐文章于 2024-08-15 01:46:54 发布

阅读量2.3k

点赞数 3

分类专栏： axios 文章标签： axios Promise ajax

本文链接：https://blog.csdn.net/qq_43843173/article/details/102757696

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作者原文

1要使用axios跨域请求数据，则需要进行一下这几个步骤哦。

要使用axios，就必须下载axios这个库，可以有一下几个途径：

  1、使用 npm install axios 或者 yarn add axios
  2、可以之间使用线上cdn：<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

需要从后端那里获得数据api接口地址。本次模拟数据是从JSONPlaceholder官网上随机获取的一个api接口。
需要了解到axios是基于 Promise + XMLHttpRequest 的，axios的底层还是ajax的。所以要知道全局函数axios.get(url)它返回的是一个Promise对象，最后还是需要一个变量容器来接收的。
接收到的Promise 还需要对之进行成功回调与失败回调处理。

以下是我的例子（嘻嘻）：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端与后台交互之axios</title>
</head>
<!-- 首先第一步，要使用axios的话，就必须先引入axios这个库 -->
<!-- axios的优点就是可以解决以同步的方式处理异步操作，是基于ajax + XMLHTTPRequest的，也就是它的底层还是ajax-->
<!-- 因为这个库中已经暴露一个axios的全局函数 -->
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script>
        //get请求的,先定义好有效的请求地址
        // 为了方便，从JSONPlaceholder官网中随机获取一个api数据接口，进行跨域请求
        var url = 'http://jsonplaceholder.typicode.com/albums';

        var p = axios.get(url);//这个axios()返回的是一个Promise对象，需要对这个对象进行处理

        p.then((response)=>{
            console.log(response);
            // 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
            // config: {url: "请求的地址"}，这是一个配置文件
            //  headers: 请求头信息
            // data: (100) 返回响应的数据
            // request: ajax相关的请求信息
            // status: 200；响应状态
            // statusText: "OK"
            // 判断响应状态
            if(response.status === 200){
                //获得成功响应返回的数据
                console.log(response.data);
            }
        },(error)=>{
            //错误返回错误信息
        });
        console.log(p);
    </script>
<body>
    
</body>
</html>