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

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

你可能感兴趣的:(vue,axios)