概述
Axios 是一个基于 Promise 的现代化 HTTP 客户端,用于浏览器和 Node.js。它提供了许多强大的功能,使得在客户端和服务器之间发送 HTTP 请求变得更加简单和灵活。以下是 Axios 的一些主要特点和功能
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 超时处理
- 查询参数序列化支持嵌套项处理
- 自动将请求体序列化为:
- JSON (application/json)
- Multipart / FormData (multipart/form-data)
- URL encoded form (application/x-www-form-urlencoded)
- 将 HTML Form 转换成 JSON 进行请求
- 自动转换JSON数据
- 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
- 为 node.js 设置带宽限制
- 兼容符合规范的 FormData 和 Blob(包括 node.js)
- 客户端支持防御XSRF
构建使用流程
1.安装 axios
cnpm install axios -S //安装axios
cnpm install qs -S //可以不装 用来格式化参数
2.封装请求
src下新建文件夹http
及index.js
文件
新建index.js
文件
import axios from 'axios'
// import qs from "qs";//qs为序列化数据的js库
//设置baseUrl
axios.defaults.baseURL = process.env.NODE_ENV === "production" ? "https://xxxxx" : "/api";
//设置请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;
//请求拦截器
axios.interceptors.request.use(
config => {
// const token = store.state.token;
// token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.reject(error);
}
);
//响应拦截器
axios.interceptors.response.use(
response => {
if (response.status == 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
alert(`异常请求:${JSON.stringify(error.message)}`)
}
);
//封装post/get请求
export default {
post(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
data,
//data: qs.stringify(data), //参数序列化
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
});
})
},
get(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params: data,
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
};
3.挂载
在main.js:
文件中进行全局方法挂载
const app = createApp(App);
import axios from './http/index'
app.config.globalProperties.$api = axios;
app.use(axios)
4.配置代理
在vue.config.js
文件中
module.exports = {
// 部署应用时的基本 URL
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
// build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
outputDir: "dist",
// build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: "home",
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: "index.html",
// 默认在生成的静态资源文件名中包含hash以控制缓存
filenameHashing: true,
// 问你是否使用eslint
lintOnSave: false,
devServer: {
// open: true, // 自动启动浏览器
// https: true,
proxy: {
"/api": {
target: "https://xxxx", // 正式
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": "",
},
}
},
};
5.使用
在vue文件中使用 proxy.$api
传入请求路径与参数
<template>
<p @click="submit">点击</p>
</template>
<script>
import { ref, reactive,getCurrentInstance,toRefs } from "vue";
export default {
name: "home",
props: {},
setup() {
//获取当前组件的实例、上下文来操作router和vuex等。相当于this
const { proxy, ctx } = getCurrentInstance();
let state = reactive({
active:-1,
nav:[
{ name: "测试1", icon: "face" },
{ name: "测试2", icon: "face" },
]
})
//点击发送请求
const submit = ()=> {
proxy.$api
.get("/services/getData", { id:'123' })
.then((res) => {
console.log(res);
});
}
return {
...toRefs(state),
submit
};
},
};
</script>
参考
https://www.npmjs.com/package/axios
https://www.npmjs.com/package/vue
axios