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

一、安装axios

npm i axios -g

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

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

// 引入 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: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
})

四、接口请求并处理数据

在utils下面新建文件http.js

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方式抛出在页面上调用

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>