Axios学习

Posted 2023-02-18 十九万里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Axios学习相关的知识，希望对你有一定的参考价值。

Axios

一、API的分类

调用API的风格：restful风格与restless风格

1.1、REST(restful) API

发送请求进行CRUD哪个操作由请求方式来决定
同一个请求路径可以进行多个操作
请求方式会用到GET/POST/PUT/DELETE

1.2、非REST(restless) API

请求方式不决定请求的CRUD操作
一个请求路径只对应一个操作
一般只有GET/POST

二、使用json-server搭建REST API

1.1、json-server是什么?

用来快速搭建模拟的REST API的工具包

1-搭建站点服务。
2-提供数据的操作。

在线文档: https://github.com/typicode/json-server
https://blog.csdn.net/u012149969/article/details/108394159

设置hosts:

打开C:\\Windows\\System32\\drivers\\etc\\hosts

127.0.0.1  zhangsan.com
#127.0.0.1  weixin.zhangpeiyue.com
#127.0.0.1  api.shangguigu.com
#127.0.0.1  nihao.com
#127.0.0.1  amitoufu.com

1.2、使用json-server：提供模拟数据。

安装Node
由于json-server需要通过Node对其进行启动，所以首先要安装Node。
全局安装json-server

cnpm install json-server -g

查看版本

json-server -v

准备一份JSON文件


  "scoreList":[
    
        "id":1,
        "userName":"张三",
        "age":12,"sex":"男",
        "score":"yuWen":10,"shuXue":20,"yingYu":30
    ,
    
        "id":2,
        "userName":"李四",
        "age":21,
        "sex":"女",
        "score":"yuWen":12,"shuXue":45,"yingYu":37
    ,
    
        "id":3,
        "userName":"王五",
        "age":56,
        "sex":"男",
        "score":"yuWen":12,"shuXue":20,"yingYu":30
    ,
    
        "id":4,
        "userName":"赵六",
        "age":23,
        "sex":"女",
        "score":"yuWen":19,"shuXue":21,"yingYu":65
    ,
    
        "id":5,
        "userName":"严七",
        "age":12,
        "sex":"男",
        "score":"yuWen":34,"shuXue":67,"yingYu":43
    ,
    
        "id":6,
        "userName":"沈八",
        "age":43,
        "sex":"女",
        "score":"yuWen":56,"shuXue":76,"yingYu":30
    ,
    
        "id":7,
        "userName":"钱九",
        "age":13,
        "sex":"男",
        "score":"yuWen":24,"shuXue":89,"yingYu":30
    ,
    
        "id":8,
        "userName":"张十",
        "age":12,
        "sex":"女",
        "score":"yuWen":10,"shuXue":54,"yingYu":31
    
  ]

启动

–watch:可以省略，如果省略那么数据发生变化，站点服务不会及时响应。

–delay:指定延长响应的时间，单位为毫秒。

–port:指定端口号

–host:主机名

json-server --watch data.json --port 80 --host 127.0.0.1 --delay 2000

1.3、使用浏览器访问测试

http://localhost:3000/scoreList
http://localhost:3000/scoreList/1

1.4、使用postman测试接口

测试GET / POST / PUT / DELETE请求

三、fetch

3.1、区别一般http请求与ajax请求

ajax请求是一种特别的http请求

对服务器端来说, 没有任何区别, 区别在浏览器端

浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求

浏览器端接收到响应

(1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面

(2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

3.2、fetch的使用

    const btns = document.querySelectorAll("button");
    btns[0].onclick = async function () 
        // 请求方式，请求地址，发送的参数，响应的结果
        // get  http://api.zhangpeiyue.com/scoreList?sex=男
        // xhr
        // const xhr = new XMLHttpRequest();
        // // xhr.responseType = "json";
        // // xhr.responseType = "json";
        // xhr.open("get","http://api.zhangpeiyue.com/scoreList?sex=男&age=12");
        // xhr.send();
        // xhr.onload = function ()
        //     console.log(xhr.response);
        // 

        // fetch:接替xhr.
        // 1-window对象下的属性,类型是一个函数。可以完成xhr所有的工作。
        // console.log(window.fetch);

        // 2-默认发送的是get请求。第一个参数是请求地址
        // fetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12");

        // 3-fetch返回的是一个promise
        // const result = fetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12");
        // console.log(result);

        // 4-promise成功的值是一个对象（value）,value原型中有json属性（方法），返回的也是一个promise
        // const result = fetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12");
        // result.then(value=>
        //     console.log(value);
        //     const res = value.json();// 将响应体的数据转换为JSON格式，并将结果作为promise的成功值
        //     console.log(res);
        // )

        // 5-获得响应体数据JSON
        // fetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12")
        //     .then(value => 
        //         return value.json();// xhr.repsonseType="json"
        //     ).then(res => 
        //         console.log(res)
        //     )

        // 6-获得响应体数据文本text
        // fetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12")
        //     .then(value => 
        //         return value.text();// xhr.responseType="text"
        //     ).then(res => 
        //     console.log(res)
        // )

        // 7-async await
        // const response = await fetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12");
        // const result = await response.json();
        // console.log(result);

        // 8-封装
        async function myFetch(url)
            const response = await fetch(url);
            const result = await response.json();
            return result;
        
        myFetch("http://api.zhangpeiyue.com/scoreList?sex=男&age=12").then(value=>
            console.log(value);
        )
    
    btns[1].onclick = function()
        // 方式1  地址1  请求头1  请求体1   响应体1
        //1- // xhr x-www-form-urlencoded
        // const xhr = new XMLHttpRequest();
        // xhr.open("post","http://api.zhangpeiyue.com/scoreList");
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // xhr.send("userName=谢霆锋&age=40");
        // xhr.onload = function()
        //     console.log(xhr.response);
        // 

        //2- xhr application/json
        // const xhr = new XMLHttpRequest();
        // xhr.open("post","http://api.zhangpeiyue.com/scoreList");
        // xhr.setRequestHeader("Content-Type","application/json");
        // xhr.send(JSON.stringify(
        //     userName:"古天乐",
        //     age:18
        // ));
        // xhr.onload = function()
        //     console.log(xhr.response);
        // 

        // 3-fetch application/json
        // fetch("http://api.zhangpeiyue.com/scoreList",
        //     method:"post",
        //     headers:
        //         "Content-Type":"application/json"
        //     ,
        //     body:JSON.stringify(
        //         userName:"古巨基",
        //         age:20
        //     )
        // ).then(value=>
        //     return value.json()
        // ).then(value=>
        //     console.log(value);
        // )

        // 3-fetch application/x-www-form-urlencoded
        fetch("http://api.zhangpeiyue.com/scoreList",
            method:"post",
            headers:
                "Content-Type":"application/x-www-form-urlencoded"
            ,
            body:"a=1&b=2"
        ).then(value=>
            return value.json()
        ).then(value=>
            console.log(value);
        )


    
    btns[2].onclick = async function()
        // xhr put------>post
        // const xhr = new XMLHttpRequest();
        // xhr.open("put","http://api.zhangpeiyue.com/scoreList/3");
        // xhr.setRequestHeader("Content-Type","application/json");
        // xhr.send(JSON.stringify(
        //     userName:"王源",
        //     age:18
        // ));
        // xhr.onload = function()
        //     console.log(xhr.repsonse);
        // 

        // fetch
        // const response = await fetch("http://api.zhangpeiyue.com/scoreList/4",
        //     method:"put",
        //     headers:
        //         "Content-Type":"application/json"
        //     ,
        //     body:JSON.stringify(
        //         userName:"赵无极",
        //         age:12
        //     )
        // )
        // const result = await response.json();
        // console.log(result);

    
    btns[3].onclick = async function()
        // xhr
        // const xhr = new XMLHttpRequest();
        // xhr.open("delete","http://api.zhangpeiyue.com/scoreList/3");
        // xhr.send();
        // xhr.onload = function ()
        //     console.log(xhr.response);
        // 

        // fetch
        // const response = await fetch("http://api.zhangpeiyue.com/scoreList/4",
        //     method:"delete"
        // )
        // const result = await response.json();
        // console.log(result);
    

    btns[4].onclick = async function()
        // xhr
        // const xhr = new XMLHttpRequest();
        // xhr.open("PATCH","http://api.zhangpeiyue.com/scoreList/5");
        // xhr.setRequestHeader("Content-Type","application/json");
        // xhr.send(JSON.stringify(
        //     userName:"严妻"
        // ))
        // xhr.onload = function()
        //     console.log(xhr.response);
        // 

        // fetch
        const response = await fetch("http://api.zhangpeiyue.com/scoreList/6",
            method:"PATCH",
            headers:
                "Content-Type":"application/json"
            ,
            body:JSON.stringify(
                userName:"段正淳"
            )
        )
        const result = await response.json();
        console.log(result);

四、axios的理解和使用(重点)

4.1、axios是什么?

前端最流行的ajax请求库 ,没有之一。

react/vue官方都推荐使用axios发ajax请求

文档: https://github.com/axios/axios

4.2、axios特点

基于xhr + promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求。

4.3、axios常用语法

引入axios.js一

cnpm install axios -S

在html中引入

<script src="../node_modules/axios/dist/axios.min.js"></script>

引入axios.js二

https://www.bootcdn.cn/axios/ 下载

axios(config): 通用/最本质的发任意类型请求的方式

axios(url[, config]): 第一个参数是地址，第二个参数是配置项。

axios.request(config): 等同于axios(config)

axios.get(url[, config]): 发get请求

axios.delete(url[, config]): 发delete请求

axios.post(url[, data, config]): 发post请求

axios.put(url[, data, config]): 发put请求

axios.defaults.xxx: 请求的默认全局配置

axios.interceptors.request.use(): 添加请求拦截器

axios.interceptors.response.use(): 添加响应拦截器

axios.create([config]): 创建一个新的axios实例。

axios.CancelToken(): 用于创建取消请求的token对象

axios.isCancel(): 是否是一个取消请求的错误

axios.all(promises): 用于批量执行多个异步请求

axios.spread(): 用来指定接收所有成功数据的回调函数的方法

4.4、难点语法的理解和使用

4.4.1、axios.create(config)

根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置

新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

为什么要设计这个语法?

(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理

(2) 解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

4.4.2、拦截器函数/ajax请求/请求的回调函数的调用顺序

说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程

流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调

注意: 此流程是通过promise串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response

4.4.3、取消请求

基本流程

 配置cancelToken对象

 缓存用于取消请求的cancel函数

 在后面特定时机调用cancel函数取消请求

 在错误回调中判断如果error是cancel, 做相应处理

实现功能

 点击按钮, 取消某个正在请求中的请求

  在请求一个接口前, 取消前面一个未完成的请求

设置为淘宝数据源

// 查看
npm config get registry
// 设置
npm config set registry https://registry.npm.taobao.org

github开发者平台(api接口)

https://docs.github.com/cn
https://docs.github.com/cn/rest
https://docs.github.com/en/rest/reference/issues#create-an-issue

练习接口地址:
    https://docs.github.com/cn/rest/reference/search#search-users
    url: https://api.github.com/search/users
    query参数:
        q : 请求关键字(最终接口会返回名字中包含q指定字符的用户)

前端如何传递数据给后台

1. url (params query hash)
    适合所有的请求
2. 请求体     
    适合 post put patch请求
3. 请求头
    适合所有的请求

安装axios

npm i  axios

使用axios函数发送请求

import axios from "axios"
    axios(config)    
    axios(url,config)  
    axios.get(url,config)  
    axios.post(url,data,config)

使用axios实例发送请求

一个接口服务器一个实例
import axios from "axios"
const axiosIns = axios.create(config) //提取公共的请求配置
    axiosIns(config)    
    axiosIns(url,config)  
    axiosIns.get(url,config)  
    axiosIns.post(url,data,config)

config配置

timeout: 超时时间
baseURL: 基地址
url: 接口地址
method: 请求方式
data: 请求体
headers: 请求头
params : url中query数据

拦截器

axios函数可以拥有拦截器    
axios实例也可以拥有拦截器 
   
axios.interceptors.request.use(function (config) 
    // 在发送请求之前做些什么
    return config;
);

// 添加响应拦截器
axios.interceptors.response.use(function (response) 
    // 对响应数据做点什么
    return response.data;
, function (error) 
    // 对响应错误做点什么
    return Promise.reject(error);
);

在axios中与4个位置可以修改config

优先级顺序: 1 2 3 4
1. 配置默认值
    axios.defaults.baseURL   
2. 创建实例时
    axios.create(config)    
3. 发送请求时
    axios(config)    
4. 请求拦截器的第一个回调
    axios.interceptors.request.use(function (config) 
        return config;
    );

发送并发请求

Promise.all([请求......])

以上是关于Axios学习的主要内容，如果未能解决你的问题，请参考以下文章

Axios 前后端交互工具学习

vue3 学习笔记 —— axios 的使用有变化吗？