Axios学习

最新推荐文章于 2024-05-29 11:56:40 发布

十九万里

最新推荐文章于 2024-05-29 11:56:40 发布

阅读量350

点赞数 1

分类专栏： ajax、http 文章标签： restful json 后端

本文链接：https://blog.csdn.net/weixin_44865458/article/details/122031629

版权

ajax、http 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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([请求......])

十九万里

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Axios学习

Axios一、API的分类调用API的风格：restful风格与restless风格1.1、REST(restful) API发送请求进行CRUD哪个操作由请求方式来决定同一个请求路径可以进行多个操作请求方式会用到GET/POST/PUT/DELETE1.2、非REST(restless) API请求方式不决定请求的CRUD操作一个请求路径只对应一个操作一般只有GET/POST二、使用json-server搭建REST API1.1、json-server是什么?
复制链接

扫一扫