欢迎您来到,李雷博客 | PHP博客        登录  |  注册

Vue项目网络请求代理到封装的方法是什么

更新:2023-04-28 09:22:32
人气:208
来源:互联网转载
A+

本文小编为大家详细介绍“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项目网络请求代理到封装的方法是什么

Vue项目网络请求代理到封装的方法是什么

推荐的文章
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2024 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4