axios中文网站：axios-http.com/zh/
一、安装axios
npm install axios --save 二、配置axios，添加拦截器
在src目录下新建一个request文件夹，在里面新建index.ts（或者.js）文件，编辑代码如下：
import axios from 'axios' // 创建一个 axios 实例 const service = axios.create({
baseURL: '/api', // 所有的请求地址前缀部分 timeout: 60000, // 请求超时时间毫秒 withCredentials: true, // 异步请求携带cookie headers: {
// 设置后端需要的传参类型 'Content-Type': 'application/json', 'token': 'your token', 'X-Requested-With': 'XMLHttpRequest', }, }) // 添加请求拦截器 service.interceptors.request.use( function (config) {
// 在发送请求之前做些什么 return config }, function (error) {
// 对请求错误做些什么 console.log(error) return Promise.reject(error) } ) // 添加响应拦截器 service.interceptors.response.use( function (response) {
console.log(response) // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 // dataAxios 是 axios 返回数据中的 data const dataAxios = response.data // 这个状态码是和后端约定的 const code = dataAxios.reset return dataAxios }, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 console.log(error) return Promise.reject(error) } ) export default service 三、使用axios发送请求
在src目录下新建一个apis文件夹，这里面放入今后所有的请求文件，例如新建一个请求用户信息的接口user.ts，代码如下：
// 导入axios实例 import httpRequest from '@/request/index' // 定义接口的传参 interface UserInfoParam {
userID: string, userName: string } // 获取用户信息 export function apiGetUserInfo(param: UserInfoParam) {
return httpRequest({
url: 'your api url', method: 'post', data: param, }) } 接着在具体业务页面里使用这个请求，例如：
<script setup lang="ts"> import {
onMounted } from 'vue' import {
apiGetUserInfo } from '@/apis/user' function getUserInfo() {
const param = {
userID: '10001', userName: 'Mike', } apiGetUserInfo(param).then((res) => {
console.log(res) }) } onMounted(() => {
getUserInfo() }) </script> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/210178.html原文链接：https://javaforall.net
