vue踩坑笔记 四.封装网络请求(axios)

1.多网络操作进行封装

新建一个http文件,将所有与网络有关的操作都放在此文件中(单一指责)

示例代码

/**
 * 封装的axios的工具类
 * 负责请求的公共配置,以及请求拦截,响应拦截,错误处理,网络不佳处理
 */
import axios from 'axios'
import { toLogin } from './redirect'
import qs from 'querystring'
import {baseURL,timeOut} from '../config/request'

//实例化axios
let instance = axios.create({ baseURL, timeOut });
//设置请求的token
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//配置post请求的请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//配置请求拦截
instance.interceptors.request.use(requestIntercept, dealRequestErr)
//配置响应拦截
instance.interceptors.response.use(responseIntercept, dealResponseErr)
export default instance;

//请求拦截函数
function requestIntercept(config) {
  //对token进行处理
  dealToken()
  if (config.method === "post") { 
    config.data = qs.stringify(config.data)
  }
  return config
}

//响应拦截函数
function responseIntercept(res) {
  return res.status === 200 ? Promise.resolve(res) : Promise.reject(res)
}

//处理错误的请求
function dealRequestErr(err){ 
  console.log(err)
}

//处理错误的响应
function dealResponseErr(err){ 
  const { response } = err
  if (response) {
    errorHandle(response.status, response.data.message)
    return Promise.reject(response)
  } else { 
    netWorkBad()
  }
}

//对token进行处理
function dealToken(config) { 
  console.log("对token进行处理")
}

//对请求错误进行处理
function errorHandle(status,message) { 
  switch (status) {
    case 401:
      toLogin()
      break;
    case 403:
      console.log("登录过期请重新登录")
      setTimeout(() => {
        toLogin()
      }, 2000);
      break;
    case 404:
      console.log("请求路径错误")
    default:
      console.log(message)
      break;
  }
}

//用户网络不佳时的处理
function netWorkBad() {
  
}

2.将网络请求的域名以及公共部分封装至配置文件

示例代码

export const baseURL = "/api";//请求的域名以及请求的公共部分
export const timeOut = 5000;//请求超时时间 

3.对每一个页面的请求进行整理

将一个页面的所有请求都放在一个js文件中,便于维护
示例代码

/**
 * 首页的接口列表
 */
import {baseURL} from '@/config/request'
import requireHelp from '@/utils/http'

const homeRequire = {
  getLispImg() { //获取轮播图数据
    console.log(baseURL + "/Shop/subjectList")
    return requireHelp.get(baseURL + "/Shop/subjectList") 
  }
  /**
   * 其他网络请求
   */
}

export default homeRequire

4.设置所有页面的网络请求的出口

将封装好的每一个页面的请求对象都放于index文件,对外只暴露index的相关接口(开闭原则)

/**
 * api接口的统一出口
 */

import homeRequire from './home'
 
export default {
  homeRequire,
  /**
   * 其他页面的请求对象
   */
}

5.在全局对api进行设置

import api from './api'
Vue.prototype.$api = api

6.实际运用

//获取轮播图的数据
this.$api.homeRequire.getLispImg().then(res => {
   this.imgArr = res.data.data;
 });