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