一个初级前端的简单http请求配置gcfkh的博客-

HTTP请求封装与axios简易封装

以下文章基于 vue+element UI

一、配置vue config.js 跨域

module.exports = {   devServer: {     proxy: { "/api": {         target: "https://192.168.110.29:8081/", //服务器 也就是前端请求地址         changeOrigun: true, //是否跨域         pathRewrite: { "^/api": "" //表示需要rewrite 重写的 } } } } }; 

二、配置 公用 http地址

1. 在public文件夹下建立 global.js文件, 将我们的请求api地址 放在这里, 原因：我们在打包项目时不会对public文件夹进行打包所以即使项目上线也可以更改请求地址， 为了方便服务器更换或IP地址更换时修改

   var publicConfig = {   hostConfig: {     system: "https://192.168.110.29:8081/system/user/v1.0/test/", } }; //存本地 localStorage.setItem("publicConfig", JSON.stringify(publicConfig)); 

2. 在public文件夹 indx.html文件 引入 global.js文件 不然该js运行不起来

   <script type="text/javascript" src="./app.global.js"></script> 

三、在项目中获取公共的http地址，配置请求 api地址

1. 在src目录建立config文件夹，然后建立 apiConfig.js文件

   // 取出 public 文件夹内 app.global.js 内存的本地 配置 const publicConfig = JSON.parse(localStorage.publicConfig); /* 配置API接口应用访问地址 */ const apiConfig = {   system: {     getUserList: publicConfig.hostConfig.system + "getUserList", //配置请求后半段 接口 } }; export default apiConfig; 

四、封装简单的axios请求 因为我们的请求 基本都是改请求地址和参数 因此我们可以吧常用的 post get put del封装起来，同时做统一的请求错误处理方式

1. 在src目录config文件夹下，建立 RequestConfig.js文件

   import axios from "axios"; //引入axios 请求 import { Message } from "element-ui"; // 引入element 消息组件 做全局请求提示 /**  * * @param {*}  url //请求的地址     字符串类型  String  * * @param {*}  data //请求的参数    对象类型   Object  * * @param {*}  method //请求的方式  字符类型   String  */ export const post = async (url = "", data = {}, method = "post") => { //这里暴露的post方法即post请求方法, method默认值也是post 在调用时我们一般传递 url 和 data参数即可 let res = await axios(url, {     data: data,     method: method   }); if (res) { return res; } else { Message({       showClose: true,       message: "请求失败",       type: "error" }); return false; } }; //get 请求 /**  * * @param {*}  url  * * @param {*}  params  * * @param {*}  method  */ export const get = async (url = "", params = {}, method = "get") => { let res = await axios(url, {     params: params,     method: method   }); if (res) { return res; } else { Message({       showClose: true,       message: "请求失败",       type: "error" }); return false; } }; 

五、使用以上的配置，发送一条简单的请求

1. 在src目录建立api文件夹，然后建立 api.js文件

   import apiConfig from "../config/apiConfig"; //引入配置好的请求地址  每新增一个借口需到该文件新增一个对象 键和值 import { post, get } from "../config/RequestConfig"; //引入已经封装的 简易请求 //测试请求 //暴露一个 请求方法给 页面使用 getUserList export const getUserList = () => { //返回请求方法的 结果,请求方法中已经有 异步 这里只需要返回结果即可 //return调用的就是 封装的请求方法,参数根据自己需要填写, 这示例的请求无参数 只有url 且用的post方法 不需要在传 method return post(apiConfig.system.getUserList); }; 

六、在页面中使用请求方法

1. 在我们的Vue页面中 引入请求方法

   import { getUserList } from "../api/api"; 

2. 在生命周期或其他需要的时候调用引入的方法

    mounted() { this.initPage(); },   methods: { initPage() { getUserList().then(res => { if (res) {           console.log("getUserListres", res.data.data); } }); }, } 

3. 请求成功则返回数据
   

4. 请求失败在页面弹出请求失败