vue中网络请求的封装

import axios from 'axios'

export function request(config){
  // 创建实例
  const instance = axios.create({
    baseURL: '请求baseURL',
    timeout: 5000 
  })
  // 请求拦截
  instance.interceptors.request.use((config) => {
    return config
  },err => {
    console.log(err);
  })
  // 响应拦截
  instance.interceptors.response.use((res) => {
    //对响应数据做处理
    let data = res.data
    if(data.code != 后端返回成功时设置的状态码){
        return Promise.reject(data.msg)
    }
    //必须返回，否则拿不到返回的数据
    return data
  }, err => {
    console.log(err);
  })
  // 发送真正的网络请求
  return instance(config)
}

使用：首页使用request发送网络请求

import { request } from 'network/request'

export function getData(params) {
  return request({
    url: 'home/data'
  })
}

//传参
export function getData(type,page) {
  return request({
    url: 'home/data',
    // get请求传参数params
    params: {
      type,
      page
    }
  })
}

页面中使用

    // 请求数据
    _getHomeData() {
      getData().then((res) => {
        // console.log(res);
      })
    },

    // 带参数请求数据
    _getGoodsData(type) {
      const page = this.goods[type].page + 1
      getData(type,page).then((res) => {
        // console.log(res);
      })
    }