vue项目（七）安装配置axios，vue前端访问后端接口

一、安装axios

npm i axios -g
二、创建axios实例，设置请求和响应拦截器

在src下面新建文件夹utils，下面新建文件request.js

1. // 引入 axios
2. import axios from "axios"; // 使用前要先安装依赖：npm install axios
4. //引入 element-ui 信息
5. import { ElMessage } from 'element-plus';
6. import router from "@/router";
8. // 创建axios实例
9. const service = axios.create({
10.   // 这里可以放一下公用属性等。
11.   // 用于配置请求接口公用部分，请求时会自动拼接在你定义的url前面。
12.   //设置axios请求的地址默认是'/api',这样根据第一步中配置的会将/api替换为'192.128.0.0/'
13.   baseURL: "/api", // 使用环境变量
14.   withCredentials: false, // 跨域请求时是否需要访问凭证
15.   timeout: 5000, // 请求超时时间
16.   headers: {
17.     // 可以放一下公用的请求头信息
18.     Accept: "application/json",
19.     "Content-Type": "application/json",
20.   },
21. });
23. //请求拦截器
24. service.interceptors.request.use(
25.   (config) => {
26.     // 在这里可以进行请求加密等操作，比如添加 token、cookie，修改数据传输格式等。
27.     // 设置请求头
28.     config.headers.Accept = "application/json";
29.     config.headers["Content-Type"] = "application/json";
30.     // 获取 token 并设置 Authorization 头部
31.     let token =
32.       window.localStorage.getItem("token") ||
33.       window.sessionStorage.getItem("token");
34.     if (token) {
35.       config.headers["Authorization"] = "Bearer " + token;
36.     }
37.     // 可根据需要添加其他自定义头部
38.     // config.headers["custom-header"] = "xxxx";
39.     return config;
40.   },
41.   (error) => {
42.     console.log(error);
43.     return Promise.reject(error);
44.   }
45. );
47. // 响应拦截器
48. service.interceptors.response.use(
49.   (response) => {
50.     // 对响应数据做处理
51.     return response;
52.   },
53.   (error) => {
54.     // 请求失败进行的操作
55.     if (error.response && error.response.status) {
56.       switch (error.response.status) {
57.         case 401:
58.           ElMessage.warning("尚未登录，请登录！");
59.           router.push("/login");
60.           break;
61.         case 403:
62.           ElMessage.error("权限不足！");
63.           break;
64.         case 404:
65.           ElMessage.error("请求资源不存在！");
66.           break;
67.         case 500:
68.           ElMessage.error("服务器错误！");
69.           break;
70.         default:
71.           ElMessage.error(`请求错误: ${error.response.status} - ${error.response.data.message}`);
72.       }
73.     } else {
74.       ElMessage.error("网络错误或请求超时！");
75.     }
76.     return Promise.reject(error);
77.   }
78. );
80. export default service;

复制代码

三、设置请求跨域接口

在vue.config.js中添加设置能请求跨域接口

1. const { defineConfig } = require('@vue/cli-service');
2. const AutoImport = require('unplugin-auto-import/webpack');
3. const Components = require('unplugin-vue-components/webpack');
4. const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
5.                         
6. module.exports = defineConfig({
7.   transpileDependencies: true,
8.   lintOnSave:false,
9.   configureWebpack: {
10.   //设置跨域
11.     devServer: {
12.       proxy: {
13.         "/api": {//捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
14.           target: "https://www.runoob.com",//代理的api地址，就是要跨域的地址
15.           changeOrigin: true,// 这个参数可以让target参数是域名
16.           ws: true,//是否启用websockets，用不到可设为false
17.           pathRewrite: {//对路径匹配到的字符串重写
18.             "^/api": "",
19.           }
20.         }
21.       }
22.     },
23.     //结束
24.     plugins: [
25.       AutoImport({
26.         resolvers: [ElementPlusResolver()],
27.       }),
28.       Components({
29.         resolvers: [ElementPlusResolver()]
30.       })
31.     ]
32.   }
33. })

复制代码

四、接口请求并处置惩罚数据

在utils下面新建文件http.js

1. import service from "./request";
3. const HttpMethod = {
4.   GET: "GET",
5.   POST: "POST",
6.   PUT: "PUT",
7.   DELETE: "DELETE",
8. };
10. const defaultHeaders = {
11.   "Content-Type": "application/json",
12. };
14. const createConfig = (method, url, data = {}, headers = {}, config = {}) => ({
15.   method,
16.   url,
17.   ...(method === HttpMethod.GET || method === HttpMethod.DELETE
18.     ? { params: data }
19.     : { data }),
20.   headers: { ...defaultHeaders, ...headers },
21.   ...config, // 支持额外的配置选项
22. });
24. const handleResponse = async (requestPromise, method, url) => {
25.   try {
26.     const response = await requestPromise;
27.     return response.data;
28.   } catch (error) {
29.     console.error(
30.       `Error occurred while making ${method} request to ${url}:`,
31.       error.response ?
32.         `${error.response.status} - ${error.response.data.message}` :
33.         error.message
34.     );
35.     throw error; // 重新抛出错误，以便调用者可以处理
36.   }
37. };
39. const http = {
40.   request(method, url, data = {}, headers = {}, config = {}) {
41.     const requestConfig = createConfig(method, url, data, headers, config);
42.     return handleResponse(service(requestConfig), method, url); // 传入报错时可定位到method 和 url
43.   },
44.   get(url, params = {}, headers = {}, config = {}) {
45.     return this.request(HttpMethod.GET, url, params, headers, config);
46.   },
47.   post(url, data = {}, headers = {}, config = {}) {
48.     return this.request(HttpMethod.POST, url, data, headers, config);
49.   },
50.   put(url, data = {}, headers = {}, config = {}) {
51.     return this.request(HttpMethod.PUT, url, data, headers, config);
52.   },
53.   delete(url, params = {}, headers = {}, config = {}) {
54.     return this.request(HttpMethod.DELETE, url, params, headers, config);
55.   },
56. };
58. export default http;

复制代码

五、页面可调用的接口

在utils文件夹内里新建文件夹api，每个页面创建一个对应的js文件，在文件中放你要请求的接口，通过export default方式抛出在页面上调用

1. import http from "@/utils/http";
3. export function fetchList(params = {}, headers = {}, config = {}) {
4.   return http.get("/try/ajax/json_demo.json", params, headers, config);
5. }

复制代码

六、在页面上调用接口

FirstView.vue文件中

1. <template>
2.   <div id="app">
3.                   {{ info }}
4. </div>
5. </template>
7. <script>
8. import { fetchList } from '@/utils/api/first';
10. export default {
11.   data() {
12.     return {
13.       info: "111"
14.     };
15.   },
16.   mounted () {
17.     fetchList()
18.     .then(response => this.info = response)
19.     .catch(function (error) { // 请求失败处理
20.         console.log(error);
21.     });
22.   }
23. }
24. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。