06-ajax请求
fetch请求
原生的 Fetch API
js
//使用URLSearchParams构建查询参数
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
fetch('https://example.com/api/upload-avatar?' + params.toString(), {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
'token': '123456'
},
body: JSON.stringify({
username: 'admin',
password: '123'
})
})
.then(response => response.json())
.then(data => {
console.log('上传成功', data);
})
.catch(error => {
console.error('上传失败', error);
});
axios的使用
npm安装
shell
npm install axios
yarn add axios
CDN引入
shell
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
全局设置
js
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://your-api-url', // 基础URL
timeout: 1000, // 请求超时时间
// 可以设置默认的headers
headers: {'Content-Type': 'application/json'}
});
get请求
js
axios.get(url, {
params: {
param1: 'value1',
param2: 'value2'
},
headers: {
'Authorization': 'Bearer your-token',
'Content-Type': 'application/json'
},
timeout: 5000,
withCredentials: true, //是否携带跨域请求的凭证。
responseType: 'json',
onUploadProgress: function(progressEvent) {
// 上传进度监听回调函数
},
onDownloadProgress: function(progressEvent) {
// 下载进度监听回调函数
}
}).then(response => {
console.log('Response received:', response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
POST请求
带参数,带header的POST请求
js
axios.post(url, data, {
params: {
param1: 'value1',
param2: 'value2'
},
headers: {
'Content-Type': 'application/json'
},
timeout: 5000,
withCredentials: true,
responseType: 'json',
onUploadProgress: function(progressEvent) {
// 上传进度监听回调函数
},
onDownloadProgress: function(progressEvent) {
// 下载进度监听回调函数
}
});
通用请求
js
axios({
method: 'post',
url: 'https://example.com/api/login',
data: {
username: 'admin',
password: '123'
},
params: {
param1: 'value1',
param2: 'value2'
},
headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
// 处理响应数据
console.log(response.data);
}).catch(function (error) {
// 处理错误情况
console.log(error);
});
自己写的工具类
request.js
工具类1
js
// 引入axios
import axios from 'axios';
import {ElMessage} from "element-plus";
const domain = "http://127.0.0.1/zhongya/api/portal"
// 创建axios实例
const service = axios.create({
baseURL: domain, // api的base_url
timeout: 10000, // 请求超时时间
withCredentials: true, // 是否允许携带cookie跨域
});
// 请求拦截器
service.interceptors.request.use(
config => {
const timeStamp = new Date().getTime()
config.headers['timeStamp'] = timeStamp;
// 在发送请求之前做些什么,例如添加Token
if (localStorage.getItem('token')) {
config.headers['token'] = localStorage.getItem('token');
}
return config;
},
error => {
// 对请求错误做些什么
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
if (!res.success) {
if (res.code === 10001){ // 未登录
//应该跳转到登录页面或者其他逻辑
ElMessage.error(res.message)
}else{
ElMessage.error(res.message)
}
}
return res;
},
error => {
// 对响应错误做点什么
console.log('err' + error);
// 可能根据错误码进行不同的错误处理
return Promise.reject(error);
}
);
const request = (option) => {
return new Promise((resolve,reject) => {
service({
url: option.url,
data: option.data || {},
method: option.method || 'GET'
}).then(res=>{
console.log(res)
if (res.success) {
resolve(res)
}
}).catch(err=>{
reject(err)
})
})
}
export default request;
工具类2
js
import axios , { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
import store from '@/store'
import { ElMessage } from 'element-plus'
const baseURL = import.meta.env.VITE_BASE_URL
const service = axios.create({
baseURL: baseURL,
timeout: 5000
})
// 请求前的统一处理
service.interceptors.request.use(
(config) => {
// JWT鉴权处理
if (store.getters['user/token']) {
config.headers['token'] = store.state.user.token
}
return config
},
(error) => {
console.log(error) // for debug
return Promise.reject(error)
}
)
service.interceptors.response.use(
(response) => {
const res = response.data
if (res.code === 200) {
return res
} else {
showError(res)
return Promise.reject(res)
}
},
(error)=> {
console.log(error) // for debug
const badMessage = error.message || error
const code = parseInt(badMessage.toString().replace('Error: Request failed with status code ', ''))
showError({ code, message: badMessage })
return Promise.reject(error)
}
)
// 错误处理
function showError(error) {
// token过期,清除本地数据,并跳转至登录页面
if (error.code === 403) {
// to re-login
store.dispatch('user/loginOut')
} else {
ElMessage({
message: error.msg || error.message || '服务异常',
type: 'error',
duration: 3 * 1000
})
}
}
export default service
原生ajax
js
/**
* post 请求 ,传递json参数
*/
function show() {
let xhr = new XMLHttpRequest();
xhr.open('POST', '/send', true);
xhr.setRequestHeader("Content-Type", "application/json");
let data = {
key1: "value1",
key2: "value2"
};
let jsonData = JSON.stringify(data);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(jsonData);
}
ajax请求
text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
js
// 在AJAX请求中设置Cookie
$.ajax({
url: "https://jsonplaceholder.typicode.com/todos",
method: "GET",
dataType: 'json', //返回 JSON 数据
xhrFields: {
withCredentials: true
},
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});