Vue2数据请求封装

归纳两种Vue2的常见封装形式（包含uniapp）

前提：安装axios

1.简单封装地址（uniapp）

在pages文件夹同级创建request文件夹，创建api.js

在api.js中创建地址变量

const URL = 'https://123.com' // 正式地址

const login = URL + '/api/User/login';

//导出
export default {
    URL,
    login
}

在需要请求数据的页面引用api文件

	import api from '../../request/api.js';

请求数据

uni.request({
    url: api.login,
    method: 'POST',
    data,
    header: {
    'Content-Type': 'application/x-www-form-urlencoded'
        },
    success: res => {}
    })
                   

优点：请求数据都很直观（见仁见智）

缺点：代码冗余，重复代码多

2.简单封装地址（Vue2）

在views文件夹同级创建request文件夹，创建api.js

api.js的地址写法和第一个方法一致，创建完地址之后直接导出即可

在main.js中挂载axios和api

import axios from 'axios'
import Api from  './request/api.js';

Vue.prototype.axios = axios;
Vue.use(VueAxios, axios)
Vue.use(Api, Api)

请求数据

this.axios.post(Api.getNotReadMsgNum, data).then((res) => {})

3.封装请求方法（Vue2）

在views文件夹同级创建request文件夹，创建api.js、axios.js、request.js

axios.js

import axios from "axios";

//开发环境
// axios.defaults.baseURL = "http://47.103.40.97:8080"; //43.143.197.79

//  测试环境
axios.defaults.baseURL = "https://123.net/api"; //43.143.197.79

//线上环境
// axios.defaults.baseURL = "https://123.net/api";//43.143.197.79

export default axios;

创建地址头部，然后导出

request.js

import axios from "./axios"; //引入axios
import router from "../router";


const service = axios.create({
  headers: {
    //请求头
    get: {
      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
    },
    post: {
      "Content-Type": "application/json",
      // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
    },
  },
  settimeout: 50000, //超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么 验证token之类的
    if (localStorage.getItem("token")) {
      config.headers.token = window.localStorage.getItem("token");
      // localStorage.removeItem("userInfo");
      //   console.log(localStorage.getItem("token"));
      //   console.log("存入的token",token);
      //   console.log("config请求的数据:", config.headers.token);
    }
    return config; //记得一定要 返回config
  },
  (error) => {
    // 对请求错误做些什么
    console.log("error请求的数据:", error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // console.log("返回的数据", response);
    // 这里拦截401错误，并重新跳入登页重新获取token
    // 后面还能继续判断code
    if (response.status && response.status === 200) {
      // 通讯成功
      if (response.data.code === 0) {
        return response.data;
      } else if (response.data.code == 401) {
        // 如果是token过期，跳转至登录
        // console.log("登录过期");
        // console.log("清除token");
        // localStorage.removeItem("token"); // 移除token，跳转至登录
        localStorage.clear();
        sessionStorage.clear();
        // alert("请重新登录!");
      }
      return Promise.resolve(response.data);
    }
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

api.js

import requests from "./request";

//测试接口
export const Test = () => {
  return requests({ url: "/user/wx/getAllUser", method: "get" });
};

//密码登录
export const LoginByPwd = (data) => {
  return requests({ url: "/user/pc/loginByPassword", method: "post", data });
};

其他请求方式同理

请求数据

import { Test} from "../request/api";

Test().then((res) => {
   console.log(res);
});