axios练手案例
2021-10-28 本文已影响0人
coderhzc
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
