axios請求示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="node_modules/axios/dist/axios.js"></script>
<script>
axios.defaults.headers.common['Authorizationxxxxx'] = 13123123
const instance = axios.create({
baseURL: 'http://jsonplaceholder.typicode.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.interceptors.request.use(config=>{
config.headers.Authorization = 'xxx';
console.log(config);
return config
})
instance({
method: 'get',
url: '/posts/1',
}).then(res => {
console.log(res.data);
});
</script>
</body>
</html>
設置http頭
axios.defaults.headers.common['Authorizationxxxxx'] = 13123123
const instance = axios.create({
baseURL: 'http://jsonplaceholder.typicode.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.interceptors.request.use(config=>{
config.headers.Authorization = 'xxx';
console.log(config);
return config
})
攔截器
- 場景
請求: 展示loading
響應: 取消loading
instance.interceptors.request.use(config=>{
config.headers.Authorization = 'xxx';
console.log(config);
return config
})
config的結構
axios的responseType
// responseType 表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
從接口獲取圖片 然後展示圖片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="01.png" alt="">
<script src="node_modules/axios/dist/axios.js"></script>
<script>
axios.defaults.headers.common['Authorizationxxxxx'] = 13123123
const instance = axios.create({
baseURL: 'http://jsonplaceholder.typicode.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.interceptors.request.use(config => {
config.headers.Authorization = 'xxx';
console.log(config);
return config
})
// instance({
// method: 'get',
// url: '/posts/1',
// }).then(res => {
// console.log(res.data);
// });
instance({
responseType: 'blob',
method: 'get',
url: 'http://localhost:63342/hlconfdiff-frontend/aDemo/04/01.png',
}).then(res => {
console.log(res.data);
function ProcessFile(e) {
var file = document.getElementById('file').files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (event) {
var txt = event.target.result;
console.log(txt);
var img = document.createElement("img");
img.src = txt;//將圖片base64字符串賦值給img的src
document.getElementById("result").appendChild(img);
};
}
reader.readAsDataURL(file);
}
function contentLoaded() {
document.getElementById('file').addEventListener('change',
ProcessFile, false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);
});
</script>
</body>
</html>