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项目网络请求代理到封装的方法是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。