Axios
Axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
文档:https://axios.nodejs.cn/
Axios特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防止 CSRF
安装
使用 npm:
$ npm install axios
使用 yarn:
$ yarn add axios
使用方法
发送一个 GET 请求:
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// always executed
});
Axios 也支持 POST 请求:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
发送表单数据:
const {data} = await axios.post('https://httpbin.org/post', {
firstName: 'Fred',
lastName: 'Flintstone',
orders: [1, 2, 3],
photo: document.querySelector('#fileInput').files
}, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
)
Axios 实例
我们可以使用自定义配置创建一个新的 axios 实例。
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
拦截器
可以在请求或响应被 then 或 catch 处理前拦截它们:
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
取消请求
Axios 允许创建自定义的实例,配置默认的请求行为:
javascript
// Create an instance with the default settings
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// Send a GET request
instance.get('/user/12345')
.then(function(response){
console.log(response.data);
});
响应结构
响应的数据结构包括以下几个重要部分:
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
错误处理
处理请求错误时,Axios 会将错误封装在一个统一的对象中:
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
在Vue中封装Axios
import axios from "axios";
import { ElMessage } from "element-plus";
const baseURL = "http://127.0.0.1:8000";
const instance = axios.create({
baseURL: baseURL,
timeout: 5000,
});
instance.interceptors.request.use(
(config) => {
// 添加用户token
return config;
},
(e) => Promise.reject(e)
);
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
},
async function async(error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
if (error.response.status === 401) {
// 可验证用户是否登录
ElMessage.error("登录状态失效,请重新登录");
}
ElMessage.error(
error.response.data.detail || error.response.data.error || "服务异常"
);
return Promise.reject(error);
}
);
export default instance;
export { baseURL };
原文地址:https://blog.csdn.net/weixin_74144099/article/details/138160157
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!