Vue項目網絡請求代理到封裝的方法是什么

本文小編為大家詳細介紹“Vue項目網絡請求代理到封裝的方法是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue項目網絡請求代理到封裝的方法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1.創建vue項目

vue create demo

demo是項目名稱

2.安裝axios

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

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,//請求體
  });
};

7.在頁面內引入方法，并使用

讀到這里，這篇“Vue項目網絡請求代理到封裝的方法是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。