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

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

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

一： 封装思想方法

1. 首先安装axios

2. 设置基础的路径(baseURL)

3. 设置超时时间

4. 请求参数(默认参数可以为设备的宽高)

5. 请求方式(GET,POST)

6. 请求成功或者失败后的处理

7. 请求前 请求后的处理

   二：网络模块需要提供的功能

8. GET POST请求 上传 下载

9. 统一URL管理

10. 数据解析

11. 监控网络状态

12. 网络数据缓存

13. 提示

14. 测试

思路：

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")
    });

注意：只要我们懂得了他的思路和原理，其实写起来也是比较的容易的。封装也是能规范我们的代码。