Vue項目的網絡請求代理到封裝步驟詳解

更新時間：2023年04月27日 16:05:20 作者：世界的盡頭就是打工人

這篇文章主要介紹了Vue項目的網絡請求代理到封裝步驟,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.創(chuàng)建vue項目

vue create demo

demo是項目名稱

2.安裝axios

進入demo里面打開終端(黑窗口)，執(zhí)行

npm install axios

3.進行config.js配置

devServer: {
    host: "0.0.0.0", // 是否可以被覆蓋
    port: 8090, // 配置本地端口號
    open: true,
    //解決跨域問題
    proxy: {
      // 正式
      "/api": {
        target: "http://IP地址:端口號/",
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置這個參數
        pathRewrite: {
          "^/api": "",
        },
      },
      },
    },
  },

4.main.js里引入

//http封裝請求
import axios from "axios";
axios.defaults.baseURL = "/api";
axios.defaults.headers = //公共攜帶請求頭
//大部分是 "Content-Type:application/json;charset=UTF-8"
axios.defaults.withCredentials = true;

5.src目錄下新建Utils文件夾,在內封裝request.js

import axios from "axios";//引入axios
const request = axios.create({//進一步封裝axios
  baseURL: "/api",//配置跟路由
  timeout: 5000,//配置請求超時時間
});
//添加請求攔截器
request.interceptors.request.use(function (config) {}
//添加響應攔截器
request.interceptors.request.use((res) => {
  return res;
}),
  (err) => {
    return Promise.reject(err);
  };
export default request;
//暴露出去

6.以login路由為示例 src文件下新建api文件，在api內新建login.js

import request from "@/utils/request"; // 引入request
// 登錄
export const UserLogin = (params) => {//封裝login請求
  return request({
    url: "/login",//請求地址
    method: "post",//請求方式
    data: params,//請求體
  });
};