美文网首页需要近期研究的项目
axios练手案例

axios练手案例

作者: coderhzc | 来源:发表于2021-10-28 11:54 被阅读0次

    1. 在本地新建一个文件夹

    (1) 文件夹中新建 db.json
(2) 文件新建完后才能以后
     -- 安装命令: npm install -g json-server
     -- 运行命令: json-server --watch db.json
(3) 以上弄好以后就在db.json 文件中写入初始数据

    实际截图:

    image.png

    2.新建一个axios使用的具体代码文件:

    <!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://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .axios-box {
      width: 600px;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="axios-box">
    <h1>基本使用</h1>
    <div>
      <button style="background-color:blue;">发送GET请求</button>
      <button style="background-color:orange;">发送POST请求</button>
      <button style="background-color:palegreen">发送PUT请求</button>
      <button style="background-color:red">发送DELETE请求</button>
    </div>

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

    // 1.发送GET请求 查询数据
    btns[0].onclick = function () {
      axios({
        method: "GET",
        url: "http://localhost:3000/posts/2"
      }).then(res => {
        console.log(res)
      })
    }

    // 2.发送POST请求 添加数据
    btns[1].onclick = function () {
      axios({
        method: "POST",
        url: "http://localhost:3000/posts",
        data: {
          title: "今天天气不错,还挺风和日丽的",
          author: "楚楚胡"
        }
      }).then(res => {
        console.log(res)
      })
    }

    // 3.发送PUT请求, 修改文章
    btns[2].onclick = function () {
      axios({
        method: "PUT",
        url: "http://localhost:3000/posts/3",
        data: {
          title: "今天天气不错,还挺风和日丽的",
          author: "天王盖地虎"
        }
      }).then(res => {
        console.log(res)
      })
    }

    // 4.发送DELETE请求, 删除文章
    btns[3].onclick = function () {
      axios({
        method: "DELETE",
        url: "http://localhost:3000/posts/3",
        data: {
          title: "今天天气不错,还挺风和日丽的",
          author: "天王盖地虎"
        }
      }).then(res => {
        console.log(res)
      })
    }



  </script>
</body>

</html>

    实际截图:

    image.png

    /*************************以上是基本使用的案例**********************/

    3.axios的其他使用方式-request

    <!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://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .axios-box {
      width: 600px;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="axios-box">
    <h1>基本使用</h1>
    <div>
      <button style="background-color:blue;">发送GET请求</button>
      <button style="background-color:orange;">发送POST请求</button>
      <button style="background-color:palegreen">发送PUT请求</button>
      <button style="background-color:red">发送DELETE请求</button>
    </div>

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

    // 1.发送request请求 查询数据
    btns[0].onclick = function () {
      axios.request({
        method: "GET",
        url: "http://localhost:3000/comments"
      }).then(res => {
        console.log(res)
      })
    }

    // 2. 发送POST请求
    btns[1].onclick = function () {
      // 第一个值:URL地址,第二个值:是你要传递给后端的数据
      axios.post("http://localhost:3000/comments", { body: "明天是我的生日", postId: 6666 }).then(res => {
        console.log(res)
      })
    }

  </script>
</body>

</html>

    4.axios默认配置

    <!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://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .axios-box {
      width: 600px;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="axios-box">
    <h1>基本使用</h1>
    <div>
      <button style="background-color:blue;">发送GET请求</button>
      <button style="background-color:orange;">发送POST请求</button>
      <button style="background-color:palegreen">发送PUT请求</button>
      <button style="background-color:red">发送DELETE请求</button>
    </div>

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

    // 默认配置
    axios.defaults.method = "GET"; // 设置默认的请求类型为GET
    axios.defaults.baseURL = "http://localhost:3000"; // 设置基础的 URL
    axios.defaults.params = { id: 100 }; // 设置地址栏拼接
    axios.defaults.timeout = 3000; // 设置超时时间
    btns[0].onclick = function () {
      axios({
        url: "/posts"
      }).then(res => {
        console.log(res)
      })
    }

  </script>
</body>

</html>

    4.axios创建实例对象

    <!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://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .axios-box {
      width: 600px;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="axios-box">
    <h1>基本使用</h1>
    <div>
      <button style="background-color:blue;">发送GET请求</button>
      <button style="background-color:orange;">发送POST请求</button>
    </div>

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

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

    // 这里 duanzi 和axios 对象的功能几近一样的
    // console.log(duanzi)
    duanzi({
      url: "/getJoke"
    }).then(res => {
      console.log(res.data)
    })

  </script>
</body>

</html>

    实际截图

    image.png

    5.axios 拦截器

    <!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://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <script>
    // 添加请求拦截器 config配置对象
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      console.log("请求成功")
      // 如果你在这里对config添加默认参数的话就可以这样: 那么每次你在发请求的时候都会默认携带这个参数
      config.params = { a: 100 }
      return config;
    }, function (error) {
      // 对请求错误做些什么
      console.log("请求失败")
      return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      console.log("响应成功")
      // 对服务器返回的数据做一个处理
      return response.data // 这种的话每次就是处理服务器返回的数据只要 response.data的数据  // [{...}{....}]
      // return response;
    }, function (error) {
      // 对响应错误做点什么
      console.log("响应失败")
      return Promise.reject(error);
    });

    // 发送请求
    axios({
      method: "GET",
      url: "http://localhost:3000/posts"
    }).then(res => {
      console.log(res)
    })
  </script>
</body>

</html>

    实际截图

    image.png

    6.axios 取消发送请求

    <!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://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .axios-box {
      width: 600px;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="axios-box">
    <h1>axios取消发送请求</h1>
    <div>
      <button style="background-color:blue;">发送请求</button>
      <button style="background-color:orange;">取消请求</button>
    </div>

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

    //2. 声明全局变量
    let cancel = null
    btns[0].onclick = function () {
      // 检测上一次的请求是否已经完成
      if (cancel !== null) {
        cancel()
      }
      axios({
        method: "GET",
        url: "http://localhost:3000/posts",

        //1.如果要取消发送请求的话, 需要添加配置对象的属性
        cancelToken: new axios.CancelToken(function (c) {
          // 3. 将 c 的值复制给cancel
          cancel = c


        })
      }).then(res => {
        console.log(res)
      })
    }

    // 4. 给第二个按钮绑定事件 这样就可以解决取消请求的问题了
    btns[1].onclick = function () {
      cancel()
      // 请求完成 cancel = null 初始化
      cancel = null
    }


  </script>
</body>

</html>

    七.axios 创建多个实例

        const instance1 = axios.create({
      baseURL: "http://coderwhy.xyz",
      timeout: 5000,
      headers: {

      }
    })

    const instance2 = axios.create({
      baseURL: "http://baidu.xyz",
      timeout: 10000,
      headers: {

      }
    })

    八.axios 最终的封装

    在src文件夹下面建立一个service 文件 scr/service

    service文件夹里面有两个文件 首先建立一个config.js 文件,第二步建立一个request.js文件

    config.js 文件

    const devBaseURL = "https://httpbin.org"; // 开发环境
const proBaseURL = "https://production.org"; // 生产环境
// 判断如果当前是开发环境的话 就用devBaseURL 不是开发环境的话就用proBaseURL
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;

export const TIMEOUT = 5000;

    request.js文件

    import axios from 'axios';

import { BASE_URL, TIMEOUT } from "./config";

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT
});

instance.interceptors.request.use(config => {
  // 1.发送网络请求时, 在界面的中间位置显示Loading的组件

  // 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面

  // 3.params/data序列化的操作
  console.log("请求被拦截");

  return config;
}, err => {

});

instance.interceptors.response.use(res => {
  return res.data;
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log("请求错误");
        break;
      case 401:
        console.log("未授权访问");
        break;
      default:
        console.log("其他错误信息");
    }
  }
  return err;
});

export default instance;

    在任何想用的页面调用

    import React, { PureComponent } from 'react';

import axios from 'axios';
import request from './service/request';


export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      products: []
    }
  }
    request({
      url: "/get",
      params: {
        name: "why",
        age: 18
      }
    }).then(console.log)
  }

  render() {
    return (
      <div>
        App
      </div>
    )
  }
}

    axios总结:

    axios get请求 不带参数 和 带参数:

    image.png

    axios post请求 带参数

    image.png

    相关文章

      网友评论

        本文标题：axios练手案例

        本文链接：https://www.haomeiwen.com/subject/dbomaltx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        需要近期研究的项目

        关于我们|服务条款|联系我们|axios练手案例|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！