Axios 是一个基于 Promise 的网络请求库（类似于jQuery的Ajax，用于HTTP请求），作用于node.js 和浏览器中。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，是一个技术统称。
AJAX的简化,jQuery是一个封装好的JavaScript库，所以jQuery的$.ajax方法比原生Ajax的简单
缺点：依赖 jQuery，配置繁琐，不轻量
选择建议：项目已经使用了jQuery，并且对HTTP请求没有特殊需求
基于 Promise的网络请求库，用于浏览器和Node.js中发送HTTP请求。axios是通过promise技术实现对ajax实现的一种封装，本身上来说axios就是ajax
缺点：可能出现跨域问题
选择建议：正在使用较新的JavaScript框架（如React、Vue等），并且需要高级HTTP功能
XMLHttpRequest是一个浏览器内置的JavaScript对象，它允许开发者在页面没有刷新的情况下从服务器请求数据，并接收服务器的响应。是AJAX的基础
缺点：配置和调用方式都很繁琐
选择建议：正在开发一个需要兼容旧浏览器或需要更精细地控制HTTP请求的应用
Fetch API ES6 之后出现的基于 Promise 的一个JavaScript库，是一个现代的网络请求API，
缺点：新技术，部分浏览器可能不兼容
选择建议：正在开发一个不需要复杂HTTP处理功能的Web应用，并且希望使用原生的浏览器API
get：一般用于获取数据
post：一般用于提交数据（表单提交与文件上传）
patch：更新数据（只将修改的数据推送到后端（服务端））（适合数据量比较大的更新）
put：更新数据（所有数据推送到服务端）（适合数据量比较小的更新）
delete：删除数据
// ————————axios get方法第一种写法————————
// get方法——————1.不带参数
axios.get('http://jsonplaceholder.typicode.com/posts')
.then(function (response) {
// 处理成功情况
console.log(response.data);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
});
// get方法——————2.带参数
// 方式一：参数写在url中
axios.get('http://jsonplaceholder.typicode.com/posts/2')
.then(function (response) {
// 处理成功情况
console.log(response.data);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
});
// 方式二：参数写在params中
axios.get('http://jsonplaceholder.typicode.com/posts',{
params:{
id:2
}
})
.then(function (response) {
// 处理成功情况
console.log(response.data);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
});
// ————————axios get方法的第二种写法————————
// get方法——————1.不带参数
axios({
method:'get',
url:'http://jsonplaceholder.typicode.com/posts',
}).then(res =>{
console.log(res.data)
})
// get方法——————1.带参数
axios({
method:'get',
url:'http://jsonplaceholder.typicode.com/posts',
params:{
id:2
}
}).then(res =>{
console.log(res.data)
})
// ————————axios post方法第一种写法————————
// post请求常用的数据请求格式有两种：
// application/json
// form-data 表单提交（图片上传、文件上传）
// application/json
axios.post("/user", "id=123&name=zs")
.then(res=>{
console.log(res)
});
axios.post("/user", {
id:123,
name:'zs'
})
.then(res=>{
console.log(res.data)
});
let data = {id:123,name:"zs"}
axios({
method:'post',
url:'/user',
// 与get请求使用params不同的是，post请求使用data属性
data:data,
}).then(res=>{
console.log(res)
})
// form-data 表单提交（图片上传、文件上传）
let data = {id:123,name:"zs"}
let formData = new FormData();
for (let key in data) {
formData.append(key, data[key]);
}
console.log(formData);
axios.post("/user", formData)
.then((res) => {
console.log(res.data);
});
// ————————axios put方法————————
axios.put("/user", {id:123,name:"zs"})
.then(res=>{
console.log(res)
});
axios.put("/user", data)
.then(res=>{
console.log(res)
});
axios({
method:'put',
url:'/user',
// 与get请求使用params不同的是，post请求使用data属性
data:data,})
.then(res=>{
console.log(res)
})
// ————————axios patch方法————————
axios.patch("/user", {id:123,name:"zs"})
.then(res=>{
console.log(res)
});
axios.patch("/user", data)
.then(res=>{
console.log(res)
});
axios({
method:'patch',
url:'/user',
// 与get请求使用params不同的是，post请求使用data属性
data:data,})
.then(res=>{
console.log(res)
})
观察下方的代码，我们发现只需要改变方法，请求路径，和请求返回的数据，但是每次都需要写很多东西，我们能不能只写我们需要的，其他的省略不写呢？这时候我们可以进行axios的封装
axios({
method:'get',
url:'http://jsonplaceholder.typicode.com/posts',
}).then(res =>{
console.log(res.data)
})
axios({
method:'get',
url:'http://jsonplaceholder.typicode.com/posts',
params:{
id:2
}
}).then(res =>{
console.log(res.data)
})
http({
url: '/api/v1/register',
method: 'POST',
data,
});
一次封装后，我们只需要传入get或post方法，请求路径，和请求返回的数据，但是如果多个页面都需要这个请求呢，代码会不会太冗余？
import {getInfor} from './axios/request'
const response = await getInfor();
//./axios/request.js
export const postRegister = (data) => {
return http({
url: '/api/v1/register',
method: 'POST',
data,
});
};
二次封装后我们只需要引入getInfor方法，就可以实现网络请求。
//http.js
import axios from "axios";
// 1. 创建axios实例
const instance = axios.create({
baseURL: "http://jsonplaceholder.typicode.com",//请求的域名 url = baseURL + requestUrl
timeout: 5000,// 请求超时时间
// headers: { //设置请求头
// "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
// },
});
// 2. axios拦截器的使用
/** 需要拦截请求的原因
* 1.config中包含了某些不符合服务器要求的信息
* 2.发送网络请求的时候需要向用户展示一些加载中的图标
* 3.网站需要登录才能请求资源，也就是需要token才能请求资源
*/
// 2.1 添加请求拦截器
// 添加公共请求头、处理请求参数等
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config; //拦截器里一定要记得将拦截的结果处理后返回，否则无法进行数据获取
},
(err) => {
// 对请求错误做些什么
return Promise.reject(err); // 在请求错误的时候的逻辑处理
}
);
// 2.2 添加响应拦截器
// 修改响应信息，比如数据转换、错误处理等
instance.interceptors.response.use(
(res) => {
// 在请求成功后对响应数据做处理
// console.log(res.data);
if (res.status === 200) {
return res.data;
}
},
(err) => {
// 对响应错误做些什么
if(err.response.status){
switch (err.response.status) {
case 400:
// 处理错误信息，例如抛出错误信息提示，或者跳转页面等处理方式。
err.message = "错误请求";
break;
case 401:
err.message = "未授权，请重新登录";
break;
case 403:
err.message = "拒绝访问";
break;
case 404:
err.message = "请求错误,未找到该资源!!!!";
alert(err.message)
break;
case 405:
err.message = "请求方法未允许";
break;
case 408:
err.message = "请求超时";
break;
case 500:
err.message = "服务器端出错";
break;
case 501:
err.message = "网络未实现";
break;
case 502:
err.message = "网络错误";
break;
case 503:
err.message = "服务不可用";
break;
case 504:
err.message = "网络超时";
break;
case 505:
err.message = "http版本不支持该请求";
break;
default:
err.message = `连接错误${err.response.status}`;
}
}
return Promise.reject(err); // 在响应错误的时候的逻辑处理
}
);
export default instance;
import http from './http'
export const getInfor = ()=>{
return http({
method:'get',
url:'/posts',
})
}
export const getInforDetail = (params)=>{
return http({
method:'get',
url:'/posts',
params
})
}
<script lang="ts" name="" setup>
import axios from 'axios';
import {getInfor,getInforDetail,postInfor } from './axios/request'
async function get() {
const response = await getInfor(); // 等待Promise解析
console.log(response);
const response1 = await getInforDetail( {id:2}); // 等待Promise解析
console.log(response1);
}
get();