提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
什么是axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
网址: https://www.javasoho.com/axios/index.html#axios-request-config
一、引入axios
npm install axios
二、axios 完整文件
import axios from "axios" // 引入axios
import { toast } from '~/composables/util' // 自己封装的组件
import { getToken } from '~/composables/auth' // 自己封装的组件
import store from "./store" // store
// aixos.create 是 aixos 的配置文件,很多配置可以参考aixos官方文档
const service = axios.create({
baseURL:import.meta.env.VITE_APP_BASE_API, // 请求的地址,不固定的
})
// request 添加请求拦截器
service.interceptors.request.use(function (config) {
// 往header头自动添加token
const token = getToken()
if(token){
config.headers["token"] = token
}
return config;
}, function (error) {
return Promise.reject(error);
});
// response 添加响应拦截器
service.interceptors.response.use(function (response) {
return response.request.responseType == "blob" ? response.data : response.data.data;
}, function (error) {
const msg = error.response.data.msg || "请求失败"
if(msg == "非法token,请先登录!"){
store.dispatch("logout").finally(()=>location.reload())
}
toast(msg,"error")
return Promise.reject(error);
})
// get 和 post 方法
const $get = (url, params) => {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// 如果不需要二次封装 get和 post
export default service
// 二次封装了post和get方法 ,如果不需要的话直接导出 service
const $post = (url, params) => {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params)) // QS.stringify(params) 是将对象 序列化成URL的形式,以&进行拼接
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
// Post2 数据格式不用转化,且可以指定头部信息
const $post2 = (url, params, type) => {
return new Promise((resolve, reject) => {
axios.post(url, params, type)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
//下面是vue3必须加的,vue2不需要,只需要暴露出去get,post方法就可以
export default {
install: (app) => {
app.config.globalProperties['$get'] = $get;
app.config.globalProperties['$post'] = $post;
app.config.globalProperties['$post2'] = $post2;
app.config.globalProperties['$axios'] = axios;
}
}
三、使用 application/x-www-form-urlencoded format
- 默认情况下,axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据,您可以使用以下选项之一
- 可以使用 qs库编码格式
import qs from 'qs';
const data = { 'bar': 123 };
const options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url,
};
axios(options);