赞
踩
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();
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。