vue+axios+promise实现网络层封装（二次封装）

本文链接：https://blog.youkuaiyun.com/Wendymwz/article/details/106386651

vue+axios+promise实现网络层封装（二次封装）

封装是一种网络模块化的机制，它使得分布各处的网络可以从收到的数据包读到控制信息，根据协议做出合适的反应.用来处理响应拦截和请求拦截也可以做我们的数据预加载，实现数据权限的校验

一：封装思想方法

首先安装axios
设置基础的路径(baseURL)
设置超时时间
请求参数(默认参数可以为设备的宽高)
请求方式(GET,POST)
请求成功或者失败后的处理
请求前请求后的处理

二：网络模块需要提供的功能
GET POST请求上传下载
统一URL管理
数据解析
监控网络状态
网络数据缓存
提示
测试

思路：

3.1 安装

`npm install axios -S

3.2 创建一个http的文件夹，里面放入api.js和 request.js

在main.js里面引入，

3.3 设置请求携带的参数方法等 request.js

/* eslint-disable no-undef */
//首先引入
import Axios from 'axios'

// 创建axios实例 设置基础的路径和超时时间
const service = Axios.create({
  baseURL: 'https://test.365msmk.com',
  timeout: 3000
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  //  console.log(JSON.parse(localStorage.token))
  if (localStorage.token) { //判断是否存在token，如果存在的话，则每个http的header都加上token
  //设置头信息
    config.headers['authorization'] = 'Bearer' + JSON.parse(localStorage.token)

  }

  return config
}, _error => {
  // eslint-disable-next-line prefer-promise-reject-errors
  return Promise.reject('请求出错')
})

// 响应拦截器
service.interceptors.response.use(res => {
//如果状态码是200的话就说明请求成功，那么我们就返回请求成功后的数据
  if (res.status === 200) {
    return res.data
  }
}, error => {
  // eslint-disable-next-line prefer-promise-reject-errors
  //如果是错误的话 我们就提示请求出错
  return Promise.reject('出错啦', error)
})

export default service

3.6 api.js


//首先引入我们需要的请求操作
import request from './request'
//这个方法是用来获取我们传递过来的参数并且进行拼接的

function params(value) {
  var a = '?';
  //首先我们拿到传递过来的值并且循环 
  //在这里注意：forin 循环的是数组forof循环的是value
  for (let b in value) {
    console.log(b, value[b]);
      //循环出来的key 如果要用&符号连接的话  那么会出现一个问题就是最后面也会有着这个符号 ，我们就要想办法给他截取掉
    a += b + '=' + value[b] + '&'
 
  }
  //这一步的操作就是截取的 最终返回截取成功的
  a = a.substr(0, a.length - 1)
  console.log(a)
  return a
}

// 登录
export function login() {
  return request({
    url: '/api/app/login',
    method: 'post',
    data: {
      mobile: "19937723787",
      password: "123456",
      type: 1
    }
  })
}
export function toClassDetails(params) {
  return request({

    url: `/api/app/courseInfo/basis_id=${params}?`,
    method: 'get'
  })
}
//返回讲师介绍
export function vipDetail(params) {
  return request({

    url: `api/app/teacher/info/${params}`,
    method: 'get'
  })
}
// 讲师信息
export function getData(params) {
  return request({
    url: `/api/app/teacher/${params}?`,
    method: 'get'

  })
}
// 学员评价
export function comment(data) {
  return request({
    url: '/api/app/teacher/comment',
    method: 'post',
    data
  })
}
// 主讲课程
export function mainCourse(data) {
  return request({
    url: '/api/app/teacher/mainCourse',
    method: 'post',
    data
  })
}
//首页数据
export function homeData(data){
  return request({
    url:'/api/app/recommend/appIndex',
    method:'get',
    data
  })
}
export function courseInfo(params){
  return request({
    url:`http://localhost:8080/api/courseInfo/basis_id=${params}?`,

    method:'get'
  })
  
}
// 关注和取消关注
export function collect(params){
  return request({
    url:`api/app/teacher/collect/${params}`,
    method:'get'
  })
}

3.7 使用：

import {toClassDetails,Sumcode,  login,} from "../http/api";

//直接使用
 getData(this.$route.query.teacher_id).then(res => {
      console.log("老师介绍", res.data.teacher);
      this.list = res.data.teacher;
      // 这个是我拿到当前讲师详情的状态 赋值给checked
      this.checked = res.data.flag;
      window.console.log(this.checked, "4567+90")
    });