axios网络模块request.js封装

一、get请求（默认）

使用接口时，先用postman测试接口是否有效

1.request.js文件

//封装的request.js文件
import axios from "axios";

export function request(config) {
  const instance = axios.create({
    baseURL: "http://111.111.111.111:8000/aaa/aa",
    timeout: 5000
  });

//拦截器
  instance.interceptors.response.use(
    res => {
      // console.log(res);
      return res.data;
    },
    err => console.log(err)
  );

  instance.interceptors.request.use(
    config => {
      console.log(config);
      return config;
    },
    err => console.log(err)
  );

  return instance(config);
}

2.使用

import { request } from "./request";

export function getHomeMultidata() {
  return request({
    url: "/home/multidata"
  });
}

export function getHomeGoods(type, page) {
  return request({
    url: "/home/data",
    params: {
      type,
      page
    }
  });
}

3.vue组件

import { getHomeMultidata, getHomeGoods } from "network/home";

    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banner = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },

二、post请求，PUT请求

1.request.js文件

//封装的request.js文件
//封装的request.js文件
import axios from 'axios';

//第一个实例
export function request1(config) {
  const instance = axios.create({
    baseURL: 'http://timemeetyou.com:8889/api/private/v1',
    timeout: 5000,
  });

  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => console.log(err)
  );

  instance.interceptors.request.use(
    (config) => {
      config.headers.Authorization = window.sessionStorage.getItem(
        'token'
      );
      return config;
    },
    (err) => console.log(err)
  );

  return instance(config);
}

//第二个实例，PUT方法
export function request2(config) {
  const instance = axios.create({
    baseURL: 'http://timemeetyou.com:8889/api/private/v1',
    timeout: 5000,
    method:"PUT"
  });

  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => console.log(err)
  );

  instance.interceptors.request.use(
    (config) => {
      config.headers.Authorization = window.sessionStorage.getItem(
        'token'
      );
      return config;
    },
    (err) => console.log(err)
  );

  return instance(config);
}

2.http.js

import { request1, request2 } from './request';

export function toLogin(user) {
  return request1({
    url: '/login',
    params: user,
  });
}

export function getMenuList() {
  return request1({
    url: '/menus',
  });
}

export function getUserList(queryInfo) {
  return request1({
    url: '/users',
    params: queryInfo,
  });
}

export function changeUserState(uId, type) {
  return request2({
    url: '/users/' + uId + '/state/' + type,
  });
}

3.vue组件使用

<script>
import { toLogin } from 'network/http';
export default {
  name: 'login',
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'admin',
        password: '123456',
      },
  },
  methods: {
    login() {
      this.$refs.loginFormRef.validate((validate) => {
        if (validate) {
          toLogin(
          //传入账号密码
            this.loginForm,
          ).then((res) => console.log(res));
        }
      });
    },
  },
};
</script>

附：添加token

 instance.interceptors.request.use(
    config => {
      config.headers.Authorization =window.sessionStorage.getItem("token");
      console.log(config);
      return config;
    },
    err => console.log(err)
  );

默认为GET请求

三、微信小程序封装

微信网络请求

//request.js
/*封装的网络请求*/
/*封装的网络请求*/
let ajaxTimes = 0; //计算网络请求的次数，用于一个页面中有多个网络请求
export const request = (params) => {
  ajaxTimes++;
  console.log('我正在增加：' + ajaxTimes);
  /* 添加网络加载的符号 */
  wx.showLoading({
    title: '加载中',
    mask: true, //添加蒙版
  });
  const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1"
  return new Promise((resolve, reject) => {
    wx.request({
      ...params,
      url: baseUrl + params.url,
      success: (result) => {
        resolve(result);
      },
      fail: (error) => {
        reject(error);
      },
      complete: () => {
        ajaxTimes--;
        if (ajaxTimes === 0) {
          //关闭加载中提示
          wx.hideLoading();
          console.log('我正在减少：' + ajaxTimes);
        }
},
    });
  });
};

//index.js
/* 引入封装好的request模块 */
/* 微信小程序引入需要写好完整路径 */
import { request} from '../../request/request';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    swiperData: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /* 轮播图的网络请求 */
    request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    }).then(res => {
      this.setData({
        swiperData: res.data.message,
      });
    })
  },
  });

四、vue/uni-app引入全局封装的网络请求

博客链接：https://www.cnblogs.com/wayhome123/p/14399357.html