0
点赞
收藏
分享

微信扫一扫

axios入门基础

_刘彦辉 2022-03-12 阅读 71
json

一、初识axios

1.使用json-server的介绍与服务搭建

  1. 在线文档: https://github.com/typicode/json-server
  2. axios中文文档
  3. 下载: npm install -g json-server
  4. 目标根目录下创建数据库 json 文件: db.json
{
	"posts": [
		{ "id": 1, "title": "json-server", "author": "typicode" },
		{ "id": 2, "title": "json-server2", "author": "typicode" }
	],
	"comments": [
		{ "id": 1, "body": "some comment", "postId": 1 }
	],
	"profile": { "name": "typicode" }
}

4. 启动服务器执行命令: json-server --watch db.json

5.使用浏览器访问测试

http://localhost:3000/posts
http://localhost:3000/posts/1
http://localhost:3000/posts/2

2.使用axios 基本使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        const btn = document.querySelectorAll('button');
        //GET
        btn[0].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method:'GET',
                //URL
                url:'http://localhost:3000/posts/2'
            }).then(value=>{
                console.log(value);
            })
        }

        //POST
        //发送一篇新的文章
        btn[1].onclick = function(){
            //发送AJAX请求
            axios({
                //请求类型
                method:'POST',
                //URL
                url:'http://localhost:3000/posts',
                //设置请求体
                data:{
                    title:'今天天气风和日丽',
                    author:'离歌笑',
                }
            }).then(value=>{
                console.log(value);;
            })
        }

        //更新数据
        //发送PUT请求
        btn[2].onclick = function(){
            axios({
                //请求类型
                method:'PUT',
                //Url
                url:'http://localhost:3000/posts/2',
                //设置请求体
                data:{
                    title:'三离三合',
                    author:'赵灵儿',
                }
            }).then(value=>{
                console.log(value);
            })
        }

        //DELETE 删除数据
        btn[3].onclick = function(){
            axios({
                //请求类型
                method:'delete',
                //Url
                url:'http://localhost:3000/posts/3',
                //设置请求体
            }).then(value=>{
            console.log(value);
            })
        }
    </script>
</body>
</html>

3.axios的其他使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios其他使用</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">其他使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');

        //发送GET请求
        btns[0].onclick = function(){
            //axios()
            axios.request({
                method:'GET',
                url:'http://localhost:3000/comments',
            }).then(value=>{
                console.log(value);
            })
        }

        //发送POST请求
        btns[1].onclick = function(){
            //axios()
            axios.post('http://localhost:3000/comments',{
                body:'行如止水',
                postId:2
            }).then(value=>{
                console.log(value);
            })
        }

        //更新数据
        //发送PUT请求
        btns[2].onclick = function(){
            //axios()
            axios.put('http://localhost:3000/comments/2',{
                body:'心无旁骛AS',
            }).then(value=>{
                console.log(value);
            })
        }

        //删除数据
        btns[3].onclick = function(){
            //axios
            axios.delete('http://localhost:3000/comments/3').then(value=>{})
        }
    </script>
</body>
</html>

4.axios的默认配置

//获取按钮
const btns = document.querySelectorAll('button');
axios.defaults.methods ='GET';//设置默认请求的类型为GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};//设置参数
axios.defaults.timeout = 300;//设置时间
//默认配置
btns[0].onclick = function(){
    axios({
        url:'/post'
    }).then(resppnse=>{
        console.log(resppnse);
    })
}

二、axios 的理解和使用

1. axios 是什么?

2. axios 特点

3.axios 常用语法

 

 

 4.难点语法的理解和使用

//获取按钮 
const btns = document.querySelectorAll('button');

//创建实例对象  /getJoke
const duanzi = axios.create({
    baseURL:'https://api.apiopen.top',
    timeout:2000
})

const another= axios.create({
    baseURL:'http:/b.com',
    timeout:3000
})
//这里的duanzi与axios对象的功能几乎是一样的

duanzi({
    url:'/getJoke',
}).then(response=>{
    console.log(response);
})

duanzi.post('/getJoke').then(resopnse=>{
    console.log(resopnse);
})

5.axios拦截器

// 设置请求拦截器 config 配置对象
axios.interceptors.request.use(function (config) {
    console.log('请求拦截器成功 1号');
    //修改config中的参数
    config.params= {id:500}
    return config;
}, function (error) {
    console.log('请求拦截器失败 1号');
    return Promise.reject(error);
});

axios.interceptors.request.use(function (config) {
    console.log('请求拦截器成功 2号');
    //修改config中的参数
    config.timeout = 2000;
    return config;
}, function (error) {
    console.log('请求拦截器失败 2号');
    return Promise.reject(error);
});

// 设置响应拦截器
axios.interceptors.response.use(function (response) {
    console.log('响应拦截器成功 1号');
    // return response;
    return response;
}, function (error) {
    console.log('响应拦截器失败 1号');
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    console.log('响应拦截器成功 2号');
    return response;
}, function (error) {
    console.log('响应拦截器失败 2号');
    return Promise.reject(error);
});
//发送请求
axios({
    mothods:'GET',
    url:'http://localhost:3000/posts',
    params:{id:20}
}).then(response=>{
    console.log('自定义回调成功处理');
    console.log(response);
})
.catch(reason=>{
    console.log('自定义失败回调');
})

 6.取消请求

基本流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning" > 取消请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次请求是否已经完成
            if(cancel!==null)
            {
                cancel();
            }
            axios({
                methods:'get',
                url:'http://localhost:3000/posts',
                //1.添加配置对象的属性
                cancelToken:new axios.CancelToken(function(c){
                    cancel = c;
                })
            }).then(response=>{
                console.log(response);
                cancel = null;
            })
        }
        btns[1].onclick =  function(){
            cancel();
        }
    </script>   
</body>
</html>

 

举报

相关推荐

axios入门

前端vue.jsiosnode.js请求头

axios基础

html前端

axios入门+封装

随笔Vue

Axios 快速入门

安全

二、 Axios入门—Axios源码分析

回调函数拦截器AxiosVue.js前端开发

Axios入门使用

typescriptaxios

axios 入门使用

p2phtmlwebviewiosnode.jsJavaScript前端开发

Axios快速入门

vue.jselementuijavascript

Axios-入门

c语言开发语言笔记

四、 Axios入门—Axios全局默认配置

AxiosJavaScript前端开发
0 条评论