vue项目（七）安装配置axios，vue前端访问后端接口
一、安装axiosnpm i axios -g
二、创建axios实例，设置请求和响应拦截器
在src下面新建文件夹utils，下面新建文件request.js
https://i-blog.csdnimg.cn/direct/98487038588748bf9820b871e9367875.png
// 引入 axios
import axios from "axios"; // 使用前要先安装依赖：npm install axios
//引入 element-ui 信息
import { ElMessage } from 'element-plus';
import router from "@/router";
// 创建axios实例
const service = axios.create({
// 这里可以放一下公用属性等。
// 用于配置请求接口公用部分，请求时会自动拼接在你定义的url前面。
//设置axios请求的地址默认是'/api',这样根据第一步中配置的会将/api替换为'192.128.0.0/'
baseURL: "/api", // 使用环境变量
withCredentials: false, // 跨域请求时是否需要访问凭证
timeout: 5000, // 请求超时时间
headers: {
// 可以放一下公用的请求头信息
Accept: "application/json",
"Content-Type": "application/json",
},
});
//请求拦截器
service.interceptors.request.use(
(config) => {
// 在这里可以进行请求加密等操作，比如添加 token、cookie，修改数据传输格式等。
// 设置请求头
config.headers.Accept = "application/json";
config.headers["Content-Type"] = "application/json";
// 获取 token 并设置 Authorization 头部
let token =
window.localStorage.getItem("token") ||
window.sessionStorage.getItem("token");
if (token) {
config.headers["Authorization"] = "Bearer " + token;
}
// 可根据需要添加其他自定义头部
// config.headers["custom-header"] = "xxxx";
return config;
},
(error) => {
console.log(error);
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
(response) => {
// 对响应数据做处理
return response;
},
(error) => {
// 请求失败进行的操作
if (error.response && error.response.status) {
switch (error.response.status) {
case 401:
ElMessage.warning("尚未登录，请登录！");
router.push("/login");
break;
case 403:
ElMessage.error("权限不足！");
break;
case 404:
ElMessage.error("请求资源不存在！");
break;
case 500:
ElMessage.error("服务器错误！");
break;
default:
ElMessage.error(`请求错误: ${error.response.status} - ${error.response.data.message}`);
}
} else {
ElMessage.error("网络错误或请求超时！");
}
return Promise.reject(error);
}
);
export default service;
三、设置请求跨域接口
在vue.config.js中添加设置能请求跨域接口
const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
configureWebpack: {
//设置跨域
devServer: {
proxy: {
"/api": {//捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
target: "https://www.runoob.com",//代理的api地址，就是要跨域的地址
changeOrigin: true,// 这个参数可以让target参数是域名
ws: true,//是否启用websockets，用不到可设为false
pathRewrite: {//对路径匹配到的字符串重写
"^/api": "",
}
}
}
},
//结束
plugins: [
AutoImport({
resolvers: ,
}),
Components({
resolvers:
})
]
}
})
四、接口请求并处置惩罚数据
在utils下面新建文件http.js
https://i-blog.csdnimg.cn/direct/a3f5d85285f94cc5820194f77c732405.png
import service from "./request";
const HttpMethod = {
GET: "GET",
POST: "POST",
PUT: "PUT",
DELETE: "DELETE",
};
const defaultHeaders = {
"Content-Type": "application/json",
};
const createConfig = (method, url, data = {}, headers = {}, config = {}) => ({
method,
url,
...(method === HttpMethod.GET || method === HttpMethod.DELETE
? { params: data }
: { data }),
headers: { ...defaultHeaders, ...headers },
...config, // 支持额外的配置选项
});
const handleResponse = async (requestPromise, method, url) => {
try {
const response = await requestPromise;
return response.data;
} catch (error) {
console.error(
`Error occurred while making ${method} request to ${url}:`,
error.response ?
`${error.response.status} - ${error.response.data.message}` :
error.message
);
throw error; // 重新抛出错误，以便调用者可以处理
}
};
const http = {
request(method, url, data = {}, headers = {}, config = {}) {
const requestConfig = createConfig(method, url, data, headers, config);
return handleResponse(service(requestConfig), method, url); // 传入报错时可定位到method 和 url
},
get(url, params = {}, headers = {}, config = {}) {
return this.request(HttpMethod.GET, url, params, headers, config);
},
post(url, data = {}, headers = {}, config = {}) {
return this.request(HttpMethod.POST, url, data, headers, config);
},
put(url, data = {}, headers = {}, config = {}) {
return this.request(HttpMethod.PUT, url, data, headers, config);
},
delete(url, params = {}, headers = {}, config = {}) {
return this.request(HttpMethod.DELETE, url, params, headers, config);
},
};
export default http;
五、页面可调用的接口
在utils文件夹内里新建文件夹api，每个页面创建一个对应的js文件，在文件中放你要请求的接口，通过export default方式抛出在页面上调用
https://i-blog.csdnimg.cn/direct/7c663bf4f56d465c9b433bce35ec483c.png
import http from "@/utils/http";
export function fetchList(params = {}, headers = {}, config = {}) {
return http.get("/try/ajax/json_demo.json", params, headers, config);
}
六、在页面上调用接口
FirstView.vue文件中
<template>
<div id="app">
{{ info }}
</div>
</template>
<script>
import { fetchList } from '@/utils/api/first';
export default {
data() {
return {
info: "111"
};
},
mounted () {
fetchList()
.then(response => this.info = response)
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]