原生 ajax
js
复制代码
// POST
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send('{"name":"xxx","age":"xxx"}');
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
}
js
复制代码
// GET
const xhr = new XMLHttpRequest();
// 地址后可以拼接 ?name=xxx&age=xxx 的参数
xhr.open('GET', 'http://localhost:3000');
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
}
axios
js
复制代码
// get 请求
// .then 的形式
axios.get('http://127.0.0.1:8080/api/getData', {
// 可以携带参数
params: {
id: 1
}
}).then(res => {
console.log(res.data)
})
// async 的形式
async function getData() {
const res = await axios.get('http://127.0.0.1:8080/api/getData')
console.log(res.data)
}
getData()
js
复制代码
// post 请求
axios.post('http://127.0.0.1:8080/api/postData',{
id: 1,
}).then(res => {
console.log(res.data)
})
js
复制代码
// axios 其他配置
const ins = axios.create({
baseURL: 'http://127.0.0.1:3000',
timeout: 5000
})
// 请求拦截器
ins.interceptors.request.use(config => {
console.log("发送了请求")
return config
})
// 响应拦截器
ins.interceptors.response.use(res => {
console.log("响应了")
return res
})
const getData = () => {
ins.get('/get').then(res => {
console.log(res)
})
}
const postData = () => {
ins.post('/post', {
name: 'zs',
age: 18
}).then(res => {
console.log(res)
})
}
getData()
postData()
fetch API
js
复制代码
// fetch API 请求（默认get）
fetch('http://127.0.0.1:8080/api/getData')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
// post
fetch('http://127.0.0.1:8080/api/postData', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'xxx',
age: 18
})
})
.then(response => {
if (response.ok) {
return response.json()
}
})
.then(data => console.log(data))
.catch(error => console.error(error))